AngularJS: Uncaught Error: [$rootScope:infdig]

Question

I am trying to get all the courts for each game:

The HTML looks like this:

<div ng-repeat = "g in games">
{{g.gameName}}
<ul>
<li ng-repeat = "c in getCourts(g.id)" ng-bind = "c.courtName"></li>
</ul>
</div>

The controller is :

$scope.games = {};
    $scope.courts = {};
    //$scope.slots = {};

    $http.get(URI+"booking/allGames").then(function success(res){
        $scope.games = res.data;
        //console.log($scope.games);
    },
    function error(res){
        console.log(res.data.message);
    });

    $scope.getCourts = function(gameId){

        //courts = {};
        $http.get(URI+"booking/courts/"+gameId).then(function success(res){

            //console.log(gameId);
            console.log(res.data);
            return res.data;
            //return courts;
        },
        function error(res){
            console.log(res.data.message);
        });;
    }

When I execute this, I getting this error:

angular.min.js:6 Uncaught Error: [$rootScope:infdig]

The angularJS documentaion says,

This error occurs when the application's model becomes unstable and each $digest cycle triggers a state change and subsequent $digest cycle.

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

I saw this answer : AngularJS use a function in a controller to return data from a service to be used in ng-repeat

But I am not sure how to fix this.

I see that the reason and answer is already told in the above link for your problem — Gopinath Shiva, Aug 08 '16 at 06:15
@GopinathShiva Reason I got, but I am still not able to fix it. — user63762453, Aug 08 '16 at 06:17
1) Your `getCourts()` method does not return anything and 2) I don't think `ng-repeat` is able to work off a promise — Phil, Aug 08 '16 at 06:19
No it doesn't. Your `$http` promise resolves with `res.data` but the calling function `getCourts()` does not return anything. You would need `return $http.get(...` but then you run into my point #2 above — Phil, Aug 08 '16 at 06:26

score 2 · Accepted Answer · answered Aug 08 '16 at 06:38

I think your only option is to pre-fetch all the data like this...

$http.get(URI+"booking/allGames").then(res => {
    $q.all(res.data.map(game => {
        return $http.get(URI+"booking/courts/"+game.id).then(res => {
            return angular.extend(game, {courts: res.data});
        });
    })).then(games => {
        $scope.games = games;
    });
});

Then you can just use a nested repeater

<div ng-repeat="g in games">
    {{g.gameName}}
    <ul>
        <li ng-repeat="c in g.courts" ng-bind="c.courtName"></li>
    </ul>
</div>

Gopinath Shiva · Answer 2 · 2016-08-08T06:50:25.573

I do recommend Phil's answer.

Here is my alternate approach

Note: I just hardcoded the data for demonstration, you need to call http in your case

//html
<div ng-controller="MyCtrl">
  <div ng-repeat = "g in games">
  {{g.gameName}}
  <ul ng-init='getCourts(g.id)'>
  <li ng-repeat = "c in courts[$index]" ng-bind = "c.data"></li>
  </ul>
  </div>
</div>

//js

$scope.courts = [];
$scope.games = [
    {
    id:1,
    gameName:'A'
  },{
    id:2,
    gameName:'B'
  },{
    id:3,
    gameName:'C'
  }
];
$scope.getCourts = function(id){
   if(id==1){
     $scope.courts[0]=[{data:'first'},{data:'second'}];
   }else if(id == 2){
     $scope.courts[1]=[{data:'third'},{data:'fourth'}];
   }else{
     $scope.courts[2]=[{data:'five'},{data:'six'}];
   }
}

fiddle: http://jsfiddle.net/Lvc0u55v/8061/

AngularJS: Uncaught Error: [$rootScope:infdig]

2 Answers2