AngularJS - 10 $digest() iterations reached. Aborting

Question

On my angular app I display a list of items that I load directly from my database. I am trying to get at least 20 items displayed at all time. Users can filter them so when too many filters are applied I'd like to load more.

The way I did it so far is the following: HTML:

<section id="list" class="ease">
          <article class='myItems' ng-repeat="job in filteredList = (items | filter: country | filter: category | filter: position)">
                   Items
          </article>
</section>

JS (in my controller):

$scope.$watch('filteredList', function(newVal, oldVal){
    if(newVal !== oldVal){
        $log.info($scope.filteredList.length);
        // code to load more data
    }
});

However I get the following error:

Error: 10 $digest() iterations reached. Aborting

I am guessing it is because the filteredList change too many times so angular blocks it. How can I fix this?

Thanks

I suppose the problem here will be somewhere in the code which is loading more data... can you share that part? — doodeec
– doodeec, Commented Mar 21, 2014 at 12:22
Could you provide your // code to load more data? This must be the issue actually ;) — sp00m
– sp00m, Commented Mar 21, 2014 at 12:23
actually I have the problem even when I comment the code loading the data — Spearfisher
– Spearfisher, Commented Mar 21, 2014 at 12:28

atondelier · Accepted Answer · 2014-03-21 12:32:58Z

1

Use $scope.$watchCollection instead of $scope.$watch since your filteredList is a collection.

Using $scope.$watch actually fails since you rebuild the reference on each digestion loop, so the watcher loops and loops again and reach the digest limit.

Interesting article about the watching methods

answered Mar 21, 2014 at 12:32

atondelier

2,43417 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Spearfisher Over a year ago

one more question: how can i wait for the page to be fully loaded to have the $scope.$watchCollection working? Thanks a lot

atondelier Over a year ago

It depends on how items is published on the scope. Either it's published at controller instantiation time and you can add a condition on $scope.items in your filteredList collection watcher. Or use the resolve attribute of your application routing.

Collectives™ on Stack Overflow

AngularJS - 10 $digest() iterations reached. Aborting

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related