title: Placing limit on API calls based on DOM insertion promises
body: <p>I'm trying to limit the number of API calls I am making if I already have enough elements on the DOM.</p>
  
  <p>But it seems in between the promises and the actual insertion, my check isn't being triggered in time.</p>
  
  <p>JS:</p>
  
  <pre><code>$scope.fireAPICalls = function() {
    if($scope.wikiArticles.length &lt; 3) {
      $scope.wikiAPI.getRandomArticle().success(function(data) {
        angular.forEach(data.query.pages, function(page, key) {
          $scope.wikiArticles.push(page);
        });
      });
      $timeout($scope.fireAPICalls, 0);
    }
  }
  
  $scope.wikiAPI = (function(){
    return {
      getRandomArticle : function() {
        return $http.jsonp("http://en.wikipedia.org/w/api.php?action=query&amp;generator=random&amp;grnnamespace=0&amp;prop=extracts|categories&amp;explaintext&amp;exintro=&amp;format=json&amp;callback=JSON_CALLBACK", function (data) {});
      }
    }
  });
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="article-listing" ng-animate="'animate'" ng-repeat="article in wikiArticles"&gt;&lt;span&gt;{{article.title}}&lt;/span&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="category in article.categories"&gt;{{category.title}}&lt;/li&gt;
      &lt;/ul&gt;
      &lt;br&gt;{{article.extract}}
  &lt;/div&gt;
  </code></pre>
  
  <p>How do I ensure that I always have a maximum of 3 elements in the <code>wikiArticles</code> array?</p>