title: Why does ng-show go into an endless loop when making an asynchronous call in angularjs?
body: <p>I have diagnosed the problem of using ng-show when using an asynchronous call, specifically using google javascript client libraries - gapi. </p>
  
  <p>I have this in my partials/html pages in my angular app. I will use ng-show as follows. This is where I call the ng-show:</p>
  
  <pre><code>&lt;div ng-show="isRegistered()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When running my battery of tests, ng-show <strong>DOES NOT</strong> go into an endless loop when I simply do a return call of some boolean value. For example:</p>
  
  <pre><code>$scope.isRegistered = function () {
  $scope.test = false;
  return $scope.test;};
  </code></pre>
  
  <p>Furthermore, there is <strong>NO endless loop</strong> when I go into another function and toggle $scope.test to true or false indefinitely with say, a simple check box.</p>
  
  <p>The problem of this endless loop begins as soon as my return is dependent on some type of asynchronous call like this:</p>
  
  <pre><code>    $scope.isRegistered = function () {
        $scope.test=false;
  
        var joe = function () {
        var deferred = $q.defer();
        gapi
        .client
        .conference
        .isRegistered()
        .execute(function (res) {
          $scope.$apply(function () {
            if (res.error) {
              $log.error('There was an Error');
              deferred.reject(res.error);
            }
            else {
              $log.info("Success");
              deferred.resolve(res.data);
            }
          });
        });
        return deferred.promise;
        };
  
      joe()
        .then(function (data) {
          $log.info("Got some data", data);
          $log.info("testing");
          $scope.test = data;
          $log.info($scope.test);
        });
  
      $log.info($scope.test);
      return $scope.test;
  
  };
  </code></pre>
  
  <p>It keeps on outputting the following in an endless loop:</p>
  
  <ol>
  <li>Success </li>
  <li>Got some data true &lt;- Boolean Value of true</li>
  <li>testing </li>
  <li>true &lt;--Boolean Value of true</li>
  <li>false &lt;- Boolean Value of false</li>
  </ol>
  
  <p>I suspect though, printing false at the end, it does not return false; it does not return anything.</p>
  
  <p>When I switch ng-show to ng-init like this:</p>
  
  <pre><code>&lt;div ng-init="isRegistered()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I get the output <strong>without</strong> an endless loop:</p>
  
  <ol>
  <li>false</li>
  <li>Success</li>
  <li>Got some data true</li>
  <li>testing</li>
  <li>true</li>
  </ol>
  
  <p>So with an ng-init, it appears it returns the $scope.test global to true - hence it terminating. With ng-show, due to the nature of the async gapi calls, and maybe just the nature of ng-show, though I ask for a return value, it never returns anything. I do not know why.</p>
  
  <p>However, I am confused because the joe() function body - the async gapi call -appears to be successfully called asynchronously, but the isRegistered() function body never "knows" that it is done - hence this loop. </p>
  
  <p>How can I got about letting isRegistered()/ng-show know that the async gapi call is done and return either true or false, and NOT constantly stay in this state of an endless loop. It appears to me, from the way I have it coded, it never returns anything. How do I make it so that isRegistered() would return either true or false based upon the return of the async gapi call?</p>