title: AngularJS with ng-scroll and ng-repeat
body: <p>Using angular-ui with angular. Markup includes an <code>ng-scroll</code> element, which I have working with retrieved data from a service. I'd like to create rows of items so an <code>ng-repeat</code> inside an <code>ng-scroll</code>. This works in principle (<a href="http://plnkr.co/edit/rU7flnIQRLTdz8fniHZF?p=preview" rel="nofollow noreferrer">plunker</a>) but AngularJS says I have something wrong in the JSON encoding and need help to figure out what I'm doing wrong.</p>
  
  <p>So to be clear, the markup and JSON below work in plunker but not in the app. The JSON in the plunker and below is taken from the debugger response body.</p>
  
  <p><strong>Markup:</strong></p>
  
  <pre><code>&lt;div class="row" &gt;
    &lt;div class="col-md-12" &gt;
      &lt;div class="video_thumb" ng-scroll='video_list in VideoIndexScrollerSource' buffer-size='10' padding="2" &gt;
        &lt;div class="row" ng-repeat="video in video_list"&gt;
          &lt;p&gt;
            &lt;a ng-href="/guides/{{video._id}}" target="_self"&gt;
              &lt;img ng-src="{{video.thumb}}"&gt;
            &lt;/a&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JSON:</strong></p>
  
  <p>In Rails, I create an array of arrays. Each element is a hash of properties to use in the above display code. The JSON returned looks like this:</p>
  
  <pre><code>[
    [
      {
        "thumb": "/uploads/thumb_11167113_det.jpg",
        "_id": "52264092a0eef2d029673f72"
      },
      {
        "thumb": "/uploads/thumb_11169448_det.jpg",
        "_id": "522649b7a0eea05c61388f4a"
      },
      {
        "thumb": "/uploads/thumb_278817_det.jpg",
        "_id": "522649b4a0eea05c61388be2"
      },
      {
        "thumb": "/uploads/thumb__old_",
        "_id": "522e5290e4b0889f651f13ae"
      },
      {
        "thumb": "/uploads/thumb_269411_det.jpg",
        "_id": "522649baa0eea05c613891b3"
      },
      {
        "thumb": "/uploads/thumb__old_",
        "_id": "5227d1f3a0ee91bdc636efb9"
      },
      {
        "thumb": "/uploads/thumb_11169964_det.jpg",
        "_id": "52264091a0eef2d029673e49"
      }
    ],
    [
      ...
    ],
    [
      ...
    ]
  ]
  </code></pre>
  
  <p>Not sure why this doesn't work, the ng-scroll should iterate rows putting an array into video_list, ng-repeat should grab each object from the row and get values.</p>
  
  <p><strong>Error:</strong></p>
  
  <p>This is the AngularJS error I get when the above JSON is returned:</p>
  
  <pre><code>TypeError: Object #&lt;Resource&gt; has no method 'push'
      at copy (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:827:33)
      at new Resource (http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:402:21)
      at http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:483:52
      at Array.forEach (native)
      at forEach (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:301:21)
      at angular.module.factory.Resource.(anonymous function).$http.then.value.$resolved (http://localhost:3000/assets/angular-1.2.0/angular-resource.js?body=1:482:37)
      at deferred.promise.then.wrappedCallback (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10598:99)
      at deferred.promise.then.wrappedCallback (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10598:99)
      at http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:10684:40
      at Scope.$get.Scope.$eval (http://localhost:3000/assets/angular-1.2.0/angular.js?body=1:11577:44) angular.js?body=1:9102
  (anonymous function) angular.js?body=1:9102
  $get angular.js?body=1:6707
  deferred.promise.then.wrappedCallback angular.js?body=1:10601
  deferred.promise.then.wrappedCallback angular.js?body=1:10598
  (anonymous function) angular.js?body=1:10684
  $get.Scope.$eval angular.js?body=1:11577
  $get.Scope.$digest angular.js?body=1:11422
  $get.Scope.$apply angular.js?body=1:11683
  done angular.js?body=1:7700
  completeRequest angular.js?body=1:7866
  xhr.onreadystatechange angular.js?body=1:7822
  </code></pre>