AngularJS: Uncaught Error: [$rootScope:infdig]
<p>I am trying to get all the courts for each game:</p>

<p>The HTML looks like this:</p>

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

<p>The controller is :</p>

<pre><code>$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);
        });;
    }   
</code></pre>

<p>When I execute this, I getting this error:</p>

<pre><code>angular.min.js:6 Uncaught Error: [$rootScope:infdig] 
</code></pre>

<p>The angularJS documentaion says, </p>

<blockquote>
  <p>This error occurs when the application's model becomes unstable and
  each $digest cycle triggers a state change and subsequent $digest
  cycle.</p>
  
  <p>One common mistake is binding to a function which generates a new
  array every time it is called.</p>
</blockquote>

<p>I saw this answer : <a href="https://stackoverflow.com/questions/20942878/angularjs-use-a-function-in-a-controller-to-return-data-from-a-service-to-be-use">AngularJS use a function in a controller to return data from a service to be used in ng-repeat</a></p>

<p>But I am not sure how to fix this.</p>