The ng-repeat element is not updated when the array changes

Question

When I try to update my array with ng-click to update the elements of the ng-repeat directive:

<li ng-repeat="itemL1 in mainMenuL1Arr" ng-click="selectL2menu(itemL1.name)"> <i ng-class="getClass(itemL1.icon)"></i> </li> 

selectL2menu () , defined on the controller as:

 $scope.selectL2menu = function selectL2menu(itemL1name){ $scope.$apply(function () { $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name]; }); } 

Immediately after clicking on a menu item of the 1st level, it should open the menu block of the 2nd level with the corresponding elements (by updating the array with the corresponding values, see below). Here is the second level menu block that I need to update when I click:

 <li ng-repeat="itemL2 in mainMenuL2CurArr" class="subMenuElemBlock" ng-class="{active: itemL2.selected}"> <a href="#"> <i ng-class="getClass(itemL2.icon)"></i> <span>{{itemL2.name}}</span> </a> </li> 

While the click event is fired, my array has been updated successfully. However, the ng-repeat directive does not update my second-level menu (base for updating the array). I tried with (and without) to use the $ apply function - the same result (although when using $ apply the error message appears Error: $ apply is already running ).

So, why is my array updated successfully with a click not shown in the menu item of the ng-repeat directive?

I read related posts ( link , link ,), but did not find any working solution.

Answer 1

Without seeing more of your controller code, it's hard to determine what might be the problem. Here is a simplified working fiddle . I suggest you compare it with what you have.

Note that you do not need to call $scope.$apply() , because the ng-click directive will do this for us automatically.

HTML:

 <ul> <li ng-repeat="itemL1 in mainMenuL1Arr" ng-click="selectL2menu(itemL1.name)"> {{itemL1.name}}</li> </ul> <ul style="margin-left: 20px"> <li ng-repeat="itemL2 in mainMenuL2CurArr"><a href="#"> <span>{{itemL2.name}}</span> </a> </li> </ul> 

JavaScript:

 function MyCtrl($scope) { $scope.mainMenuL1Arr = [ {name: 'one'}, {name: 'two'} ]; $scope.mainMenuL2Obj = { one: [ {name: '1.1'}, {name: '1.2'} ], two: [ {name: '2.1'}, {name: '2.2'} ] }; $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj['one']; $scope.selectL2menu = function (itemL1name) { console.log(itemL1name); $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name]; }; } 

Answer 2

Can you try to make $ scope. $ apply () after adding an element to an array, e.g.

 $scope.array.push({id: 1, name: 'test'}); $scope.$apply(); 

Works great for me, maybe you have another plugin function or something like this that blocks the scope, in my case I have select2, and when I select in the field the application does not start

Answer 3

You tried to change the selectL2Menu function to:

 $scope.selectL2menu = function (itemL1name){ $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name]; }