The ng-repeat div disappears after the second page is loaded with ngInfiniteScroll

Question

This Angular script gets content from an API and I implemented ngInfiniteScroll to avoid getting the whole content at once from the source. When the ngInfiniteScroll function fires to load the second page, you can see the content load for a fraction of second but then the whole div disappears. Any idea why?

LIVE EXAMPLE

http://nolayout.com/archive/index-2.html

ANGULAR SCRIPT

var app = angular.module('arenaApp', ['ngResource', 'ngSanitize', 'infinite-scroll']);

    app.controller('channelShow', function($scope, $resource, $routeParams, $rootScope) {

        var Channel = $resource('http://api.are.na/v2/channels/:slug/contents');
        $scope.channel = [];
        var channel = Channel.get({ slug: 'no-layout-archive', per: 20, sort: 'position', direction: 'asc' }, function() {
            $scope.channel = channel;
        });

        $scope.busy = false;
        $scope.page = 1;

        $scope.appendContents = function() {
            if ($scope.busy) return;
            $scope.busy = true;
            $scope.page++;
            var channel = Channel.get({ slug: 'no-layout-archive', per: 20, page: $scope.page, sort: 'position', direction: 'asc' }, function() {
                    $scope.channel = channel;
                    $scope.busy = false;
            });
        }
    });

HTML

<div class="container" infinite-scroll="appendContents()" infinite-scroll-disabled="busy" infinite-scroll-distance="1" >
    <div ng-repeat="block in channel.contents | filter:query" >
        <div ng-if="block.class == 'Image'">
            <div class="seven columns add-bottom imgnormal">
                <img src="{{block.image.original.url}}" alt="{{block.title}}">
            </div> 
        </div>
    </div>
    <div ng-show="busy">Loading</div>
</div>

Answer 1

var app = angular.module('arenaApp', ['ngResource', 'ngSanitize', 'infinite-scroll']);

    app.controller('channelShow', function($scope, $resource, $routeParams, $rootScope) {

        var Channel = $resource('http://api.are.na/v2/channels/:slug/contents');

        // change this
        // $scope.channel = [];
        $scope.channel = {contents:[]};

        // remove this, double request
        // var channel = Channel.get({ slug: 'no-layout-archive', per: 20, sort: 'position', direction: 'asc' }, function() {
            $scope.channel = channel;
        });

        $scope.busy = false;
        $scope.page = 1;

        $scope.imageloaded = function() {
          $scope.imagesloaded++;
          if ($scope.imagesloaded >= $scope.channel.contents.length)
            $scope.busy = false;
        }
        $scope.appendContents = function() {
            if ($scope.busy) return;
            $scope.busy = true;
            $scope.page++;
            var channel = Channel.get({ slug: 'no-layout-archive', per: 20, page: $scope.page, sort: 'position', direction: 'asc' }, function() {
                    // change this
                    // $scope.channel = channel;
                    $scope.channel.contents = $scope.channel.contents.concat(channel.contents);
                    $scope.imagesloaded = 0;
            });
        }
    });

// add a directive in javascript
app.directive("imageLoaded",  function() { 
    return {
      restrict: "A",
      link: function(scope, elem, attr) {
        elem.on('load', function() {
          scope.$parent.imageloaded();

        });
      }
    };
  });


<div class="container" infinite-scroll="appendContents()" infinite-scroll-disabled="busy" infinite-scroll-distance="1" >
    <div ng-repeat="block in channel.contents | filter:query" >
        <div ng-if="block.class == 'Image'">
            <div class="seven columns add-bottom imgnormal">
                <!-- use ng-src for image read: http://docs.angularjs.org/api/ng/directive/ngSrc  -->
                <img ng-src="{{block.image.original.url}}" image-loaded alt="{{block.title}}">
            </div> 
        </div>
    </div>
    <div ng-show="busy">Loading</div>
</div>