AngularJS $digest() iterations reached error

SimonTemplar

I have a SELECT element defined as so:

<select class="form-control ng-pristine ng-untouched ng-valid" 
    ng-options="composer.Name for composer in composerList track by composer.Name | orderBy:'Name'" 
    ng-model="selectedComposer">

composerList and selectedComposer are created in the controller as so:

AlbumService.getComposerList().then(function (data) {
    $scope.composerList = data; //data comes from a REST response in the service
    $scope.selectedComposer = $scope.album.Composer;
});

The structure of composer is simply Id and Name properties but it will expand in future.

The problem is with the SELECT element above. It is throwing a number of 10 $digest() iterations reached. Aborting! errors.

    Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn: function() { return ngOptions.getTrackByValue(ngModelCtrl.$viewValue); }","newVal":["J","o","h","n"," ","W","i","l","i","a","m","s"],"oldVal":["J","o","h","n"," ","W","i","l","i","a","m","s"]},{"msg":"fn: interceptedExpression","newVal":138,"oldVal":121}],[{"msg":"fn: function() { return ngOptions.getTrackByValue(ngModelCtrl.$viewValue); }","newVal":["J","o","h","n"," ","W","i","l","i","a","m","s"],"oldVal":"..."},{"msg":"fn: interceptedExpression","newVal":155,"oldVal":138}],[{"msg":"fn: function() { return ngOptions.getTrackByValue(ngModelCtrl.$viewValue); }","newVal":["J","o","h","n"," ","W","i","l","i","a","m","s"],"oldVal":"..."},{"msg":"fn: interceptedExpression","newVal":172,"oldVal":155}],[{"msg":"fn: function() { return ngOptions.getTrackByValue(ngModelCtrl.$viewValue); }","newVal":["J","o","h","n"," ","W","i","l","i","a","m","s"],"oldVal":"..."},{"msg":"fn: interceptedExpression","newVal":189,"oldVal":172}],[{"msg":"fn: function() { return ngOptions.getTrackByValue(ngModelCtrl.$viewValue); }","newVal":["J","o","h","n"," ","W","i","l","i","a","m","s"],"oldVal":"..."},{"msg":"fn: interceptedExpression","newVal":206,"oldVal":189}]]
https://errors.angularjs.org/1.7.2/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22msg%22%3A%22fn%3A%20function()%20%7B%20return%20ngOptions.getTrackByValue(ngModelCtrl.%24viewValue)%3B%20%7D%22%2C%22newVal%22%3A%5B%22J%22%2C%22o%22%2C%22h%22%2C%22n%22%2C%22%20%22%2C%22W%22%2C%22i%22%2C%22l%22%2C%22i%22%2C%22a%22%2C%22m%22%2C%22s%22%5D%2C%22oldVal%22%3A%5B%22J%22%2C%22o%22%2C%22h%22%2C%22n%22%2C%22%20%22%2C%22W%22%2C%22i%22%2C%22l%22%2C%22i%22%2C%22a%22%2C%22m%22%2C%22s%22%5D%7D%2C%7B%22msg%22%3A%22fn%3A%20interceptedExpression%22%2C%22newVal%22%3A138%2C%22oldVal%22%3A121%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20function()%20%7B%20return%20ngOptions.getTrackByValue(ngModelCtrl.%24viewValue)%3B%20%7D%22%2C%22newVal%22%3A%5B%22J%22%2C%22o%22%2C%22h%22%2C%22n%22%2C%22%20%22%2C%22W%22%2C%22i%22%2C%22l%22%2C%22i%22%2C%22a%22%2C%22m%22%2C%22s%22%5D%2C%22oldVal%22%3A%22...%22%7D%2C%7B%22msg%22%3A%22fn%3A%20interceptedExpression%22%2C%22newVal%22%3A155%2C%22oldVal%22%3A138%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20function()%20%7B%20return%20ngOptions.getTrackByValue(ngModelCtrl.%24viewValue)%3B%20%7D%22%2C%22newVal%22%3A%5B%22J%22%2C%22o%22%2C%22h%22%2C%22n%22%2C%22%20%22%2C%22W%22%2C%22i%22%2C%22l%22%2C%22i%22%2C%22a%22%2C%22m%22%2C%22s%22%5D%2C%22oldVal%22%3A%22...%22%7D%2C%7B%22msg%22%3A%22fn%3A%20interceptedExpression%22%2C%22newVal%22%3A172%2C%22oldVal%22%3A155%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20function()%20%7B%20return%20ngOptions.getTrackByValue(ngModelCtrl.%24viewValue)%3B%20%7D%22%2C%22newVal%22%3A%5B%22J%22%2C%22o%22%2C%22h%22%2C%22n%22%2C%22%20%22%2C%22W%22%2C%22i%22%2C%22l%22%2C%22i%22%2C%22a%22%2C%22m%22%2C%22s%22%5D%2C%22oldVal%22%3A%22...%22%7D%2C%7B%22msg%22%3A%22fn%3A%20interceptedExpression%22%2C%22newVal%22%3A189%2C%22oldVal%22%3A172%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20function()%20%7B%20return%20ngOptions.getTrackByValue(ngModelCtrl.%24viewValue)%3B%20%7D%22%2C%22newVal%22%3A%5B%22J%22%2C%22o%22%2C%22h%22%2C%22n%22%2C%22%20%22%2C%22W%22%2C%22i%22%2C%22l%22%2C%22i%22%2C%22a%22%2C%22m%22%2C%22s%22%5D%2C%22oldVal%22%3A%22...%22%7D%2C%7B%22msg%22%3A%22fn%3A%20interceptedExpression%22%2C%22newVal%22%3A206%2C%22oldVal%22%3A189%7D%5D%5D
    at angular.js:138
    at Scope.$digest (angular.js:18625)
    at Scope.$apply (angular.js:18945)
    at done (angular.js:12799)
    at completeRequest (angular.js:13056)
    at XMLHttpRequest.requestLoaded (angular.js:12961)

I don't know why these errors are being raised. Whatever the solution is, I need to retain setting the selectedComposer variable from the album variable and I would prefer to keep the SELECT a list of composer objects rather than a list of strings of the composer name.

To be fair, it isn't causing any functionality problems, the SELECT still works but I hate having all these errors in the console for unknown reasons. I've spent ages but can't get to the bottom of it. It seems that error is usually caused by changing an object's value but I don't believe I am doing that.

Any help is appreciated

Talisman

It's been a while since I used Angular but my guess would be the issue is related to "| orderBy:'Name'" in the select tag.

You're re-ordering the items during the render which will force a new render and consequently a loop.

In my experience it is best to give Angular the data formatted as you expect it to be rendered otherwise you start hitting performance penalties which go unnoticed at first and eventually kill you.

So try sorting composerList before it hits the select tag.