Why the same logic reaches 10 $digest() iterations in filter but not in controller

Question

I've created a filter to extract a grouped simple array from a complex array of objects:

<li ng-repeat="item in items | myFilter"></li>

and I face this error:

Error: 10 $digest() iterations reached. Aborting!

I move the same logic without any changes to controller:

<li ng-repeat="item in myFilterFunction(items)"></li>

and it's working properly. The question is what's the difference between running the same code within a filter or a function in controller?

Note: This is the fiddle illustrating the problem, if you use filter you'll see the error in console, and if you use the function in controller instead of filter, the error is gone and it works properly

Answer 1

The problem is that your filter doesn't actually filter the input. It transforms it and creates completely new objects every time it's called. So every time a new digest cycle starts, and in every digest cycle ngRepeat calls the filter again. You simply cannot use a filter that way.