title: angularjs infinte scroll displaying data
body: <p>I am having some problems with infinite scroll in AngularJS while retrieving from json API. I understand that instead of rewriting the variable I must push it in array which I tried, but then my results dissapear. The other thing is that the scroll function will be called so much times that the functionality will be broken as it won't be able to record the number var or it will be incremented too much times and I will miss data.</p>
  
  <p>Here is what I have:
  index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;API&lt;/title&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;script src="ng-infinite-scroll.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body ng-app="httpExample"&gt;
    &lt;div ng-controller="FetchController as ctrl"&gt;
    &lt;select ng-model="method"&gt;
      &lt;option&gt;GET&lt;/option&gt;
      &lt;option&gt;JSONP&lt;/option&gt;
    &lt;/select&gt;
    &lt;input type="text" ng-model="url" size="80"/&gt;
    &lt;button id="fetchbtn" ng-click="fetch()"&gt;fetch&lt;/button&gt;&lt;br&gt;
    &lt;pre&gt;http status code: {{status}}&lt;/pre&gt;
  
  
    &lt;div class="row"&gt;
    &lt;div class="col-sm-6 col-md-4" infinite-scroll="fetch()" infinite-scroll-distance="1" ng-repeat="MovieID in data"&gt;
      &lt;div class="thumbnail"&gt;
        &lt;img src="{{MovieID.CoverImage}}" alt="..."&gt;
        &lt;div class="caption"&gt;
          &lt;h3&gt;{{MovieID.MovieTitleClean}}&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and script.js</p>
  
  <pre><code>angular.module('httpExample', ['infinite-scroll'])
    .controller('FetchController', ['$scope', '$http', '$templateCache',
      function ($scope, $http, $templateCache) {
        $scope.method = 'GET';
        $scope.url = 'https://yts.re/api/list.json?limit=20&amp;quality=720p&amp;rating=5&amp;sort=seeds&amp;set=1';
        number=1;
        $scope.fetch = function() {
          $scope.code = null;
          $scope.response = null;
  
  
  $scope.url = 'https://yts.re/api/list.json?limit=30&amp;quality=720p&amp;rating=5&amp;sort=seeds&amp;set=' + number;
          $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
            success(function(data, status) {
              $scope.status = status;
              $scope.data = data.MovieList;
              number++;
              console.log(number);
            }).
            error(function(data, status) {
              $scope.data = data || "Request failed";
              $scope.status = status;
          });
        };
      }]);
  </code></pre>