angular.jsで無限スクロール #JavaScript

「ngInfiniteScroll」を使います。
http://binarymuse.github.io/ngInfiniteScroll/のDownloadから落としてきますが、「ng-infinite-scroll.min.js」を使うとなぜかエラーになったので、Developmentの圧縮ファイルの方を落としてきます。

解凍して「ng-infinite-scroll.js」を使います。

hoge.html

<html lang="ja" ng-app="hogeApp">
〜
<body>
  <div clas="container" ng-controller="hogeController as app">
    <div infinite-scroll="loadMore()" infinite-scroll-distance="0">
      <div ng-repeat="item in items">
       {{item.title}}
      </div><!--item-->
    </div><!--col-->
  </div><!--conteainer-->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="app.js"></script>
  <script src="lib/ng-infinite-scroll.js"></script>
</body>
</html>

無限スクロールの対象に「infinite-scroll」アトリビュートを指定して、パラメータに追加要素を読み込むメソッドを指定します。
「ng」は付けないので注意。
ここではitemsという変数に配列を格納しているので、このitemsに要素を追加するメソッドが「loadMore」だよ、と指定しています。

app.js

var app = angular.module("hogeApp", ['infinite-scroll']);

app.factory('loadArticle', function($http) {
  return {
    loadArticle : function(limit) {
      return $http.get('http://something.api.com/get_data?limit=' 
        + limit).success(function(data, status, headers, config) {
        return data;
      });
    }
  }
});

app.controller('hogeController', ['$scope', 'loadArticle', function($scope, loadArticle) {

  $scope.loadMore = function() {
    loadArticle.loadArticle(12, $scope.next).then(function(res) {
      for(var i=0; i<res.data.length; i++) {
        $scope.items.push(res.data[i]);
        $scope.next++;
      }
    });
  };

  loadArticle.loadArticle(12, 0).then(function(res) {
    $scope.items = res.data;
    $scope.next  = $scope.items.length;
  })
}]);

ここでは例としてAPIでJSONとってきてリストに追加する、という形にしています。
ページをスクロールしていくとloadMoreが呼ばれてitemsに要素が追加されて、無限スクロールが実現できます。