infinite scroll error

home-controller.js

app.controller('homeController', function ($scope, manga, $timeout) {
	console.log('homeController Initialized');
	$scope.visibleManga = [];
	manga.getNewManga(function (manga) {
		$scope.newManga = manga;
		$scope.visibleManga = $scope.newManga.slice(1, 25);
		$scope.app.loading = false;
	});

	$scope.loadMore = function() {
		console.log('loading more');
		var last = $scope.visibleManga[$scope.visibleManga.length - 1];
		for(var i = 1; i <= 8; i++) {
			$scope.visibleManga.push($scope.newManga[last + i]);
		}
	};
});

view.html

<div class="col-sm-12 content new-manga-listings">
  <div class="row" infinite-scroll="loadMore()" infinite-scroll-distance="1">
    <div class="col-sm-3 manga-cover-image" ng-repeat="series in visibleManga" style="background-image:url(http://l.mfcdn.net/store/manga/{{series.rel}}/cover.jpg)">
      <a ui-sref="series({title: series.title})"></a>
      <div class="overlay"><h2>{{series.title}}</h2></div>
    </div>
  </div>
</div>