Pagination breaks rendering the grid

we've been working with angulargrid for a while now and have noticed a very strange, and breaking behavior.

When we load a screen, everything is fine (aside from the fact that we have to explicitly specify a height on images, but that's just a thing we live with)

The screen in question has pagination, when we call our API to load the next page of items, angulargrid kind of freaks out. What that means is the whole grid disappears, a massive area with scrollbars. Here's a short screengrab: http://recordit.co/lqYXBjAjdE

I've noticed this behavior if some API call got called twice, that can confuse angulargrid because it the model is getting updated. But here, the API is only called once, no errors, and the model from call to call is not changing it's the same basic format.

The markup is pretty vanilla as well:

<ul class="dynamic-grid"
        ng-if="newsItems && newsItems.length > 0"
        angular-grid="newsItems" grid-width="300" gutter-size="10" angular-grid-id="newsFeed" refresh-on-img-load="false">
      <li data-ng-repeat="item in newsItems" class="grid">
        <news-card ng-model="item"></news-card>
      </li>
    </ul>

the directive news-card is just a block of HTML:

<md-card class="border-0 news-card">
  <div ng-show="item.type ==='RECO_NEWS' || item.summary.isRecommended === 'true'">
    <md-whiteframe class="md-whiteframe-z1 curation" ng-style="{'background-color' : colorPallete.Q500}"
                   layout layout-align="center center" style="color: #fff;">
      <span>For You!</span>
    </md-whiteframe>
  </div>
  <div ng-if="item.imageUrl"
       ng-click="detail()"
       class="c-pointer"
       style="background: url('{{item.imageUrl}}') no-repeat;background-size: 100%; background-position: top center; height: 300px;">
  </div>
  <md-card-header class="padd-0">
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline"><a href="/news/{{item.contentId}}" ng-style="{'color' : colorPallete.Q500}">{{item.title}}</a></span>
      </md-card-title-text>
    </md-card-title>
  </md-card-header>
  <md-card-content>
    <p>
{{item.summary.sourceContent}} <span ng-if="displayPublishDate && publishDate"><em>Published {{publishDate}}</em></span>
    </p>
  </md-card-content>
</md-card>

And the controller where the call happens:

  function load() {
    $timeout(function(){
      if ($scope.paging.current === 1) {
        $scope.start = 0;
      } else {
        $scope.start += $scope.pageSize;
      }
      CoreService.getList('NEWS', $scope.start, '').then(function (res) {
        $scope.totalRec = res.recordCount;
        $scope.totalPages = Math.ceil(res.recordCount / $scope.pageSize);
        $scope.newsItems = res.items;

      }, function (err) {
        console.log(err);
      });
    }, 200);
  }

Yeah am a bit stumped as to what could cause this very strange behavior. Am I missing anything with respect to the model being refreshed?

s-yadav / angulargrid

Pagination breaks rendering the grid #126