Angular.js inifinite digest loop with ng-repeat and filter

To understand why this happens, you need to understand the digest cycle. Angular is based on "dirty checking", and a digest cycle is when Angular iterates over all properties on the scope to see which has changed. If any properties has changed, it fires all watches for those properties to let them know that something has happened. And since a watch can change properties on the scope, Angular runs another round of dirty checking after the watches are done. The digest cycle stops when it has iterated over all properties and it sees that none of them has changed. An infinite digest occurs when a watch is always setting a new value to a property. Something like this might explain it better:

$scope.myNumber = Math.random();
$scope.$watch('myNumber', function() {
  $scope.myNumber = Math.random();
});

That is, our watch will never stop being called, since it's always changing the value of myNumber. Another common cause of the error is when you have two properties and two watches, like this:

$scope.prop1 = Math.random();
$scope.prop2 = Math.random();

$scope.$watch('prop1', function() {
  $scope.prop2 = Math.random();
});
$scope.$watch('prop2', function() {
  $scope.prop1 = Math.random();
});

Those watches will trigger each other in an endless loop.

So what happens in your case is that your filter is always returning a new array with new objects in them. And Angular doesn't compare objects by inspecting all properties and comparing them, instead it adds a $$hashkey property and uses that to compare to other objects. If two objects have the same $$hashkey property, they are considered equal. So even if you're returning an identical data structure each time, Angular sees that as a new object and runs another digest cycle until it gives up.

So for your filter to work, you need to change your code so that for the same arguments passed in, it returns an array with the same objects, as in, the same references to those objects. It should be enough to make sure that you don't always create a new object for groups[back] but reuse a previous object.

EDIT:

Well, I'm going to disappoint you and say that I recommend you to rethink your filter. It's going to be a bit confusing for other developers (or yourself a year from now) that you have a filter on an ng-repeat that doesn't return a subset of the list to repeat, but a new data structure instead. Take this example:

// Controller
$scope.items = [
  {name: 'Buy groceries', time: 10},
  {name: 'Clean the kitchen', time: 20}
];

// Template
<li ng-repeat="item in items | groupBy:something">
  {{item.total_time}}
</li>

Someone is going to look at the controller to see what an item contains, and they're going to see that it has a name and a time property. Then they look in the template, and see that there's a total_time property, and they won't know that it comes from the groupBy filter since filters in Angular normally doesn't mutate the objects.

What I think you should to is to extract your grouping code into a function on your scope (or create a service), and only use the filter to filter out unrelated items.

That way, your template will look like this instead:

<li ng-repeat="item in groupBy(items, 'something')">
  {{item.total_time}}
</li>

That will be much less confusing, since it's obvious that the groupBy() method returns a new data structure. It'll also fix the infinite digest error for you.

Multiple sources will tell you not to create new mutable objects on every call of a function in ngRepeat, as the digest cycle will check several times to see if the object is the same before deciding it's a stable model, and each new call will create an equivalent but not identical object. As mentioned by others, "The proper solution is to use a stable model, which means assigning the array to the scope/controller instead of using a getter." I ran into this problem when working with nested ngRepeats, which made it difficult to do this without a getter.

The easiest solution I found was to use ngInit to initialize a variable to reference the result of your function call, and then ngRepeat through that stable variable. For example:

<div ng-init="issues=myCtrl.getUniqueIssues()">
    <div ng-repeat="issue in issues">{{issue.name}}</div>
</div>

My source has an example with a filter as well: https://tahsinrahit.wordpress.com/2015/01/04/solution-of-infinite-digest-loop-error-for-ng-repeat-with-object-property-filter-in-angularjs/

There are 2 ways to solve this problem :

1. Use a $$hashKey attribute with each element of you array. Angular doesn't compare objects by inspecting all properties and comparing them, instead it adds a $$hashkey property and uses that to compare to other objects. If two objects have the same $$hashkey property, they are considered equal. So even if you're returning an identical data structure each time, Angular sees that as a new object and runs another digest cycle until it gives up. See :

   • Old fiddle with $digest problem - jsfiddle.net/LE6Ay

   • $$hashKey property added- jsfiddle.net/LE6Ay/1

2. Do not create new objects on every getList() call. The proper solution is to use stable model, which means assigning the array to the scope/controller instead of using a getter.