AngularJS: How to get rid of "Error: 10 $digest() iterations reached. Aborting!"

Question

I ran into this error in my project.

To illustrate it, I created a Plunker at http://plnkr.co/edit/LBXeqA5zL2dH5Zjlu6h1.

Actually, when you enter anything in search for box, there are two errors, one is Error: 10 $digest() iterations reached. Aborting! and the other Uncaught Error: 10 $digest() iterations reached. Aborting! and they seem to go together.

How to fix it?

Answer 1

You can't use two-way binding on your filter like that, because your filter is returning a new array each time and the digest loop goes on and on. You can get around this by sending in your items separately from your filter, and then using $watch to watch your searchString and created $scope.filteredItems dynamically. See here:

http://plnkr.co/edit/xQR6zAYM9gB7siAXPqJs?p=preview

There may be a way to send in filter and filterType together as 1, but I don't know how to do it.

And read this answer for more details: - Angular.js pass filter to directive bi-directional ('=') attribute

Answer 2

See the accepted answer here: Angular filter works but causes "10 $digest iterations reached"

To solve your problem, remove the filter from the ms-search-page's attribute: filtered-items="batches | searchBatch:searchString" -> filtered-items="batches"

Answer 3

This error occurs when you have nested dependencies on your $scope variable.

Every scope runs through a "digest cycle", in which Angular updates all of the changes for values on that scope. For example, if you have some value on your scope and you change it (ie setting $scope.val = 5; or something). The actual value changes, but Angular doesn't actual "apply" that change until it comes back through on a digest pass and notices that the change has occurred and then updates the value in your view (html file) or in another other places that it needs to. That's the reason they have the $scope.$apply() function, which basically forces Angular to notice any changes that you've made to the $scope.

With all that said, here's why (I think) you're getting the error. Not having spent a lot of time looking at your plunker, I think the problem is in your use of your two nested searchBatch filters. Your <ms-search-pager> in your view looks like:

<ms-search-pager filtered-items="batches | searchBatch:searchString" skip-items="skipItems" show-items="showItems" search-string="searchString"></ms-search-pager>

And your directive has two-way binding for all of the values that you're filtering, as shown here:

scope: {
        filteredItems: '=',
        skipItems: '=',
        showItems: '=',
        searchString: '='
}

This means that any time any of the values on your scope change, either in your directive or in your controller, it will be automatically updated in the other place. BUT, you are also doing a data-ng-change="skipItems=0" inside your partial, which will force the skipItems to change every time a keystroke is pressed. This will cause a $digest cycle on your scope. But you're also using that same value to help in your searchBatch filter, which causes a digest as well.

Anyway, long story short, you're doing too much work manually that Angular will do for you. And because of that extra work, you've got too many dependent $scope changes that create an infinite recursive loop of $digest() cycles. Angular has a catch that if it ever goes through 10 recursive $digest() loops, it just quits.

So, how do you fix it? Well, you know you're code better than I do, so its really going to be up to you. I'm not sure where all your dependencies fall, so you'll have to walk through it and see what is causing all of your digest calls. My guess is you can remove the data-ng-change="skipItems=0" bit and focus more on using your $scope to look for changes, rather than trying to do that through your view/directive. I know that's not much help, but I'm hoping that by explaining the principles, you'll see what's wrong and be able to fix it. Sorry.