title: AngularJS: Infinite scroll w/ <table>
body: <p>I have infinite scroll working w/ one set of data properly.  When I'm doing a similar task (image index) using an HTML table, the loadMore() function is being called far too often. Generally one light scroll will go through the whole set of data. Google didn't give me a specific example using a table, so wondering if I'm messing something up.</p>
  
  <pre><code>    &lt;table&gt;
          &lt;span infinite-scroll="loadMore()" infinite-scroll-distance='2' infinite-scroll-disabled="load_disabled"&gt;
          &lt;tr data-ng-repeat="row in data"&gt;
              &lt;td data-ng-repeat="item in row"&gt;
                  &lt;div class="image_box"&gt;
                      &lt;img data-ng-src="{{item.thumb_src}}"&gt;&lt;br&gt;{{item.title_eng}}
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/span&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>Javascript. Note that $scope.data is an array of arrays of my items.  $scope.data[0] will have 5 items, which hold a thumbnail, and a bit of text.</p>
  
  <pre><code>angular.module('myApp', ['ngRoute','infinite-scroll'])
  .controller("imageController",
          ['$scope',
          '$http',
          '$routeParams',
          '$rootElement',
          '$location',
          function($scope,$http,$routeParams,$rootElement,$location) {
  
  
  $scope.data = new Array();
  row = -1;
  
  for ( var i = 0; i &lt; 100; i++ ) {
  
      if ( i % 5 == 0  ) {
          row++;
          $scope.data[row] = new Array();
      }
  
      var item = [];
      item["title_eng"] = "title " + i;
      $scope.data[row].push( item );
  }
  
  console.log( "We got " + row + 1 + " rows." );
  
  $scope.rows = new Array();
  var row_ix = 0;
  
  $scope.loadMore = function() {
  
      if ( !$scope.data[row_ix] || !$scope.data[row_ix].length ) {
          return;
      }
  
      var x = 1; // 1 at a time
      console.log( "row_ix:  " + row_ix + "." );
      for ( var i = 0; i &lt; x; i++ ) {
          $scope.rows[row_ix] = new Array();
          $scope.rows[row_ix] = $scope.data[row_ix].slice(0);
          row_ix++;
      }
  }
  
  angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 250);\
  </code></pre>
  
  <p>EDIT: Coming back to this after some time off.  The Throttle seems to not be working. :(</p>