"10 $digest() Iterations Reached. Aborting!" Due To Filter Using Angularjs

Take a look at the following: https://dl.dropbox.com/u/4571/musicopeTypescript/musicopeTypescript/index.html when you type 'a' in the input box, you obtain the 10 $digest() iterati

Solution 1:

Is your filter modifying the original data somehow? That's the only specific thing that looks like it would cause the infinite digest cycle.

EDIT: in regards to different cloning functions lead to different behavior.

I suspect one is doing deep cloning, the other is not, and in one case AngularJS is checking object equality and your filter is creating new objects each time, causing the problem.

I'd suggest breaking up some of that logic and perhaps moving some of it into the controller or additional filters. The filter that narrows down your array should only be doing that, and just return references to the original objects. Then you can write other filters to manipulate the tags, etc.

Also +1 for Abba. :P

Solution 2:

To understand why is this is happening, it's good to understand how angular works runtime. Basically there are watchers that keep returning back different values, and so it keeps going through the $digest loop and then stops it from infinitely looping. From their $digest() documentation:

Process all of the watchers of the current scope and its children. Because a watcher's listener can change the model, the $digest() keeps calling the watchers until no more listeners are firing. This means that it is possible to get into an infinite loop. This function will throw 'Maximum iteration limit exceeded.' if the number of iterations exceeds 10.

Without knowing what your code is doing, it's hard to give a specific solution to why this is happening in your case, but this should answer your questions as to when this error is thrown.