title: Using ngInfiniteScroll to output JSON from a remote source
body: <p>I have made a small app using AngularJS 1.4, that outputs JSON data from a remote source.</p>
  
  <p><a href="http://www.freecodecamp.com/news/hot" rel="nofollow">Here is the JSON data in question.</a></p>
  
  <p>Here is my view - the link to <a href="http://binarymuse.github.io/ngInfiniteScroll/demo_async.html" rel="nofollow">ngInfiniteScroll</a> comes in at the top of the <code>container</code>:</p>
  
  <pre><code>&lt;body ng-app="cn" ng-controller="MainCtrl as main"&gt;
  
    &lt;div id="header" class="container-fluid"&gt;
      &lt;p&gt;Camper News&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;div infinite-scroll="feed.loadMore()" infinite-scroll-distance="3"&gt;
        &lt;div ng-repeat="newsItem in myData" class="news-row col-sm-12 col-xs-12"&gt;
          &lt;div class="col-sm-2 col-xs-12"&gt;
            &lt;div id="img-container"&gt;
              &lt;img ng-src={{newsItem.author.picture}} id="user-avatar" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="news-text col-sm-10 col-xs-12"&gt;
            &lt;a href={{newsItem.link}}&gt;&lt;em&gt;{{newsItem.headline}}&lt;/em&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-10 col-xs-12" id="link-description"&gt;
            {{newsItem.metaDescription}}
          &lt;/div&gt;
          &lt;div class="col-sm-12 col-xs-12" id="bottom-text"&gt;
            &lt;div class="col-sm-4 col-xs-12" id="author"&gt;
              &lt;a href='http://www.freecodecamp.com/{{newsItem.author.username}}'&gt;{{newsItem.author.username}}&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-4 col-xs-12" id="likes"&gt;
              &lt;i class="fa fa-thumbs-o-up"&gt;&lt;/i&gt; {{newsItem.upVotes.length}}
            &lt;/div&gt;
            &lt;div class="col-sm-4 col-xs-12" id="timestamp"&gt;
              &lt;span am-time-ago={{newsItem.timePosted}} | amFromUnix&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>I am attempting to stagger the loading and outputting of the data using <a href="http://binarymuse.github.io/ngInfiniteScroll/demo_async.html" rel="nofollow">ngInfiniteScroll</a>. I'm just not sure how it would work:</p>
  
  <pre><code>app.controller('MainCtrl', function($scope, Feed) {
      $scope.feed = new Feed();
  });
  
  app.factory('Feed', function($http) {
      var Feed = function() {
          this.items = [];
          this.after = '';
      };
  
      Feed.prototype.loadMore = function() {
          var url = "http://www.freecodecamp.com/news/hot";
          $http.get(url).success(function(data) {
              var items = data;
              // Insert code to append to the view, as the user scrolls
          }.bind(this));
      };
  
      return Feed;
  });
  </code></pre>
  
  <p><a href="http://codepen.io/alanbuchanan/pen/qOZrjw" rel="nofollow">Here is a link to the program on Codepen.</a> The code that relates to ngInfiniteScroll (<code>controller</code> and <code>factory</code>) is currently commented out in favour of a working version, but this of course loads all links at once.</p>
  
  <p>What do I need to insert in my <code>factory</code> in order to make the JSON load gradually?</p>