title: AngularJS - A simple infinite scroll
body: <p>I am trying to write a similar small infinite scroll to the one found here: <a href="http://jsfiddle.net/vojtajina/U7Bz9/" rel="nofollow">http://jsfiddle.net/vojtajina/U7Bz9/</a></p>
  
  <p>I've been able to display the first 5 pieces of data, however on scroll, the further items are not being displayed.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="fixed" directive-when-scrolled="loadMore()"&gt;
    &lt;ul&gt;
      &lt;li ng-repeat="i in items | limitTo: 5"&gt;{{ i.Title }}&lt;/li&gt;
    &lt;/ul&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var app = angular.module('app', []);
  
  app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
  
    $scope.items = [
      {
         "Title":"Home"
      },
      {
         "Title":"Contact"
      },
      {
         "Title":"Help"
      },
      {
         "Title":"About"
      },
      {
         "Title":"Our Offices"
      },
      {
         "Title":"Our Locations"
      },
      {
         "Title":"Meet the Team"
      }
      ,
      {
         "Title":"Our Mission"
      },
      {
         "Title":"Join Us"
      },
      {
         "Title":"Conferences"
      },
      {
         "Title":"Tables"
      },
      {
         "Title":"Chairs"
      } 
    ];
  
      var counter = 0;
      $scope.loadMore = function() {
          for (var i = 0; i &lt; 5; i++) {
              $scope.items.push({id: counter});
              counter += 10;
          }
      };
  
      $scope.loadMore();
  
  
  });
  
  
  app.directive("directiveWhenScrolled", function () {
    return function(scope, elm, attr) {
          var raw = elm[0];
  
          elm.bind('app', function() {
              if (raw.scrollTop + raw.offsetHeight &gt;= raw.scrollHeight) {
                  scope.$apply(attr.whenScrolled);
              }
          });
      };
  });
  </code></pre>
  
  <p>Here's a plunker: <a href="http://plnkr.co/edit/6ggYGZx6scSoJ5PNhj67?p=preview" rel="nofollow">http://plnkr.co/edit/6ggYGZx6scSoJ5PNhj67?p=preview</a></p>