👀 Views: 279 💬 Answers: 1 📅 Created: 2025-06-16

angularjs ng-repeat track-by digest-cycle JavaScript

I'm performance testing and I am working with an scenario where an `ng-repeat` directive isn't updating its view when I modify a nested array. I'm using AngularJS 1.8 and I have an array of objects, each containing a nested array. Although I have implemented `track by` to optimize the rendering, any modifications to the nested array are not triggering a digest cycle, and therefore the view does not reflect the changes. I’ve tried using `$scope.$apply()` and `$timeout`, but the changes are still not reflected in the UI. Here's a simplified version of my code: ```javascript $scope.items = [ { id: 1, name: 'Item 1', values: [1, 2, 3] }, { id: 2, name: 'Item 2', values: [4, 5] } ]; $scope.addValue = function(itemId, newValue) { const item = $scope.items.find(i => i.id === itemId); if (item) { item.values.push(newValue); // I've tried this: //$scope.$apply(); // not working //$timeout(() => { }, 0); // not working } }; ``` And in my HTML, I have: ```html <div ng-repeat="item in items track by item.id"> <h3>{{ item.name }}</h3> <ul> <li ng-repeat="value in item.values">{{ value }}</li> </ul> <button ng-click="addValue(item.id, item.values.length + 1)">Add Value</button> </div> ``` When I click the button to add a new value, the nested array updates, but the UI does not change to reflect the new state of the `item.values`. I’ve verified that the `addValue` function is being called and the array length does increment. However, the display remains static. Any insights into why this might be happening or how to correctly trigger the digest cycle for nested arrays in `ng-repeat` would be greatly appreciated. I'm working in a Windows 11 environment. For reference, this is a production mobile app. Has anyone dealt with something similar?