"10 $digest() iterations reached. Aborting!" with angular.copy and ng-repeat

Question

Why do I get in to a digetst loop when I repeat over a cloned array?

angular.module('myApp', [])
    .controller('Ctrl1', function(MyService) {
        var $ctrl = this;

        $ctrl.getData = MyService.getData;
    })
    .service('MyService', function () {
        var data = [
            {
             name: 'Adam',
                age: 12
            }, {
             name: 'Bob',
                age: 14
            }, {
             name: 'Caesar',
                age: 15
            }];
            
        this.getData = function () {
            // This is the offending line. If I remove the call to
            // angular.copy it works but in my real scenario I want to
            // modify the copy of `data` before returning it, without
            // affecting the original version. That's why I need to clone
            // it first.
            return angular.copy(data);
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<div ng-app="myApp" ng-controller="Ctrl1 as $ctrl">
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr ng-repeat="data in $ctrl.getData()">
            <td>{{data.name}}</td>
            <td>{{data.age}}</td>
        </tr>
    </table>
</div>

Pankaj Parkar · Accepted Answer · 2016-10-05T07:59:40.223

2

You used $ctrl.getData()(binding) on view which does return an data array copy using angular.copy. So what happens is when digest cycle start it evaluates $ctrl.getData() and returns data copy, dues to reference change in watcher(binding) value. Angular re-runs digest cycle(it happens till all the binding gets stable). Again it tries to evaluate $ctrl.getData() value get and new copy of data array. So this process goes on as every time you are changing the reference of binding variable. Since after reaching to 10th operation it throws an error (by default angular digest cycle TTL = 10).

How digest cycle?

It goes through page collects all the bindings & put those expressions inside $$watchers array of $scope.
It starts initial digest cycle to evaluate of bindings, & update corresponding model value on page.
Digest cycle internally performs dirty checking, where it loop through all the $$watchers array & evaluate there bindings against $scope. Dirty checking meaning it check watcher expression currently evaluated value with its old value.
If any changes are found in dirty checking then again it re-run digest cycle from top to bottom(from $rootScope to all childs).
Until all the bindings gets stable this process happens.

To fix this error you have to maintain two copies of variable in your code.

edited Oct 05 '16 at 07:59

answered Sep 24 '16 at 11:44

Pankaj Parkar

134,766
23
234
299

But why is it calling `getData()` more than once? What am I doing that re-triggers the digest cycle? – Tobbe Sep 24 '16 at 11:47
1

Thats because , angular runs the digest twice . Once if the scope is not dirty, it will run the digest cycle for the second time to check it is clean & so on – Sasank Sunkavalli Sep 24 '16 at 11:51
@Tobbe check I explained why happens in that way.. do you have any doubts? – Pankaj Parkar Sep 24 '16 at 11:55
1

No here we have two binding `{{data.name}}` & `{{data.age}}`, but `ng-repeat` will also be putted inside watcher to evaluate its value each time if any value gets changes – Pankaj Parkar Sep 24 '16 at 12:00
@SasankSunkavalli No, its not true, It has 3 watchers, take a look at my updated answer as well. Thanks for your comments ;) – Pankaj Parkar Sep 24 '16 at 12:00
Can you explain step 3 more? Does it always call all bindings at least twice to have an "old" value and a "current" value? – Tobbe Sep 24 '16 at 12:01
1

Link on how it works , the digest cycle http://stackoverflow.com/a/37377921/5173119 – Sasank Sunkavalli Sep 24 '16 at 12:04
@PankajParkar , I think, since it is ng-repeat , there will be more than 3 watchers – Sasank Sunkavalli Sep 24 '16 at 12:05
@SasankSunkavalli totally it would have 7 watchers, but until `ng-repeat` isn't evaluate, it would have only two `watchers`, check plunkr for the same.. [plunkr here](https://plnkr.co/edit/HwELZkO3adTa3gGu1ZRn?p=preview) – Pankaj Parkar Sep 24 '16 at 12:13
So the conclusion is once everything is compiled , only one watcher in watchersArray & watchers count is 7. Thanks for your effort – Sasank Sunkavalli Sep 24 '16 at 12:18
@SasankSunkavalli where do you find `$$watchersArray`? Isn't available anywhere in `$scope` object. where you found that thing? – Pankaj Parkar Sep 24 '16 at 12:24
@PankajParkar watchersArray I'm referring to is $$watchers in $scope – Sasank Sunkavalli Sep 24 '16 at 12:43
@SasankSunkavalli ohh.. I found that confusing.. please rename the same thing in your answer which you have linked.. – Pankaj Parkar Sep 24 '16 at 12:44
1

@PankajParkar sure I will rename – Sasank Sunkavalli Sep 24 '16 at 12:51

score 0 · Answer 2 · answered Sep 24 '16 at 11:48

0

That error is coming because angular.copy() returns a new copy instance of the object. While angular is running the digest cycle , the scope is always dirty. The limit of digest iterations is 10. Thats why u are getting the digest limit reached error. Change your service to this, You are good to go.

this.getData = function () {
        return data;
    };

answered Sep 24 '16 at 11:48

Sasank Sunkavalli

3,864
5
31
55

Yes. I know I get a new instance of the array (a clone/copy). What I don't understand is why Angular thinks it needs to re-run the digest cycle because of that. – Tobbe Sep 24 '16 at 11:50
And as I tried to explain in my comment in the code I can't just remove the call to `angular.copy` – Tobbe Sep 24 '16 at 11:50
For that u have to maintain two copies of data & return the second copy & modify it according to the requirement. But make sure u return the same object , not the new instance – Sasank Sunkavalli Sep 24 '16 at 12:01

"10 $digest() iterations reached. Aborting!" with angular.copy and ng-repeat

2 Answers2