I'm leveraging ui-router to navigate to specific subpages in my application:
var myApp = angular.module("myApp",['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('usergroups', {
url: "/usergroups",
templateUrl: "pages/usergroups.html",
controller : 'UsergroupsCtrl'
})
.state('usergroups.create', {
url: "/create",
templateUrl: "pages/usergroups.new.html",
controller : 'UsergroupsCtrl'
})
...
This is the content of my usergroups.html:
<body>
<h3>User Groups</h3><br/>
<button class="fon-btn" type="button" ng-hide = "toAdd" ng-click="toAdd = true" ui-sref="usergroups.create">Create New Group</button>
<div ui-view></div>
<ul>
<li class="bitcard padding10" ng-repeat="group in usergroups">
<span class="padding10"><strong>{{group.name}}</strong></span>
</li>
</ul>
</body>
Now, let's take a look at the contents of usergroups.new.html:
<body>
<form ng-submit="add()">
<input class="btn" type="submit" value="Add Usergroup"><br/><br/>
</form>
</body>
Whenever the user clicks on Add Usergroup, the add() function from UsergroupsCtrl is invoked:
$scope.add = function() {
$scope.usergroups.push({name:$scope.name});
console.log($scope.usergroups);
}
Although the console reflects that $scope.usergroups has been updated, the view in usergroups.html with the ng-repeat="group in usergroups" directive does not reflect this change. Even after trying to use $scope.$apply() and $scope.$digest(), an error occurs:
$apply already in progress
Interestingly, everything works smoothly without any issues when ui-router is not being utilized. How can I troubleshoot and resolve this issue?