AngularJS select ng-options infinite digest error

Question

I have a select tag with a function call in ng-options:

<select ng-model='selectedList'
        ng-options='list.id as list.label
                    for list in listService.computeLists(resume)'
>

that's causing a repeating infinite digest error.

angular.js:14525 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Is there any way to have this function call in ng-options without getting that error? I've tried memoizing but I couldn't get it to work.

Answer 1

This error occurs when the application's model becomes unstable and each $digest cycle triggers a state change and subsequent $digest cycle. AngularJS detects this situation and prevents an infinite loop from causing the browser to become unresponsive.

One common mistake is binding to a function which generates a new array every time it is called. For example:

<div ng-repeat="user in getUsers()">{{ user.name }}</div>

$scope.getUsers = function() {
  return [ { name: 'Hank' }, { name: 'Francisco' } ];
};

The solution is to return the same array object if the elements have not changed.

var users = [ { name: 'Hank' }, { name: 'Francisco' } ];

$scope.getUsers = function() {
  return users;
};

For more information, see

• AngularJS Error Reference - $rootScope:infdig Infinite $digest Loop