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
Could you provide your // code to load more data? This must be the issue actually ;) — sp00m
actually I have the problem even when I comment the code loading the data — Spearfisher

lib3d lib3d · Accepted Answer · 2014-03-21T12:32:58

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

AngularJS - 10 $digest() iterations reached. Aborting

1 Answers