title: Pagination with AngularJS or JS on object string or array
body: <p>I'm struggling to implement pagination on another developer's existing code. I've tried implementing some of the solutions explained in a previous SO Post: <a href="https://stackoverflow.com/questions/11581209/angularjs-pagination-on-a-list-using-ng-repeater">Pagination on a list using ng-repeat</a></p>
  
  <p>The code takes a two-dimensional array, parses through it converting to an object of strings, and then displays that on the page. Each object key is used as a column. </p>
  
  <p>Not sure how to utilize <a href="http://docs-angularjs-org-dev.appspot.com/api/ng.filter:limitTo" rel="nofollow noreferrer">Angular's builtin Limit filter</a> with this setup. <strong>I think that would be the ideal solution.</strong> But I'm open to just a JS solution as well. (I've started it out as a JS solution below towards bottom of post.)</p>
  
  <pre><code>var data = [["c1","blah","yup","halted","bacon", "blue"],
              ["c2","blank","everything","nothing test"],
              ["c3","test","vista","xp, 7 "],
              ["c4","true"],
              ["c5","do","something else really long text", "and more"]
          ]
  
  $rootScope.resultsObject = parseResults(data);
  
  var columnSize = ["twelve", "six", "four", "three", "two", "two"]
  
  $rootScope.columnCountShow = columnSize[columnCounter($rootScope.resultsObject)-1]
  
  factory('parseResults', function(){
          return function(resultsData){
              var resultsObject = {};
              var column;
              for(var i = 0; resultsData.length &gt; i; i++){
                  column = "column" +i;
                  resultsObject[column] = resultsData[i].toString().replace(/[\,]/g, "&lt;br&gt;")
              }
              return resultsObject;
          }
      })
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="{{columnCountShow}} columns results-column" ng-repeat="resultsObject in resultsObject"&gt;
          &lt;div ng-bind-html-unsafe="resultsObject"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How would I go about doing a <code>show more</code> style of pagination? It'll go through and display the first 2 results from each array, they click show more, and it loads the next 2, etc.</p>
  
  <p>The current method that I'm using to try and do this: Take the data (before parsed) and slice off a section, and parse only that bit. Then when they select <em>show more</em>, it'll take the next few lines, etc.</p>
  
  <pre><code>    var limit = 3;
      var start = 0;
      for (var i = 0; i &lt; data.length; i++) {
          var ndata = [[]];
          ndata = data[i].slice(start,limit);
          console.log(ndata);
      }
  </code></pre>
  
  <p>Issue with this, it seems that<code>data</code> remains intact. <strong><code>slice</code> doesn't seem to actually remove that portion from the array?</strong></p>
  
  <p><strong>Update</strong></p>
  
  <p><code>slice</code> was definitely not working out for me. Realized JS has a <code>splice</code> method. (for some reason I didn't think it existed. My current way of splicing up the data is:</p>
  
  <pre><code>$scope.submitWords = function(){
          event.preventDefault();
          var columnCount = columnCounter($scope.keywords);
          var sendObject = keyWordSplit($scope.keywords, columnCount)
  
          var limit = 2;
          var start = 0;
          var ndata = [[]];
          for (var i = 0; i &lt; $scope.testData.length; i++) {
              ndata[i] = $scope.testData[i].splice(start,limit);
              console.log(ndata);
              console.log("original data &lt;br&gt;" + $scope.testData);
          $rootScope.resultsObject = parseResults(ndata);
          }
          var columnSize = ["twelve", "six", "four", "three", "two", "two"];
          $rootScope.columnCountShow = columnSize[columnCounter($rootScope.resultsObject)-1];
      }
  </code></pre>
  
  <p>This correctly splits up the data. Now I just need to have it updating my model. When selecting <code>show_more()</code> it replaces the existing data rather than appending to it.</p>