angular.jsで無限スクロールを実装する方法

angularjs

やりたいこと

ページで一覧表示をしてリストの1番下までいったらサーバに通信してデータをとってきてhtmlに反映させるみたいなありがちな処理です。「angular.js 無限スクロール」とかで検索したら「ngInfiniteScroll」というモジュールがいろんなサイトで紹介されててこれがでデファクタなのかなぁとも思いつつ、使わない方法です。

実装

// html
<body ng-app="App">
  <div ng-controller="ControllerIndex">
    <div id="fixed" when-scrolled="loadMore()">
      <ul>
        <li ng-repeat="i in items">{{i.id}}</li>
      </ul>
    </div>
  </div>
</body>

//css
<style>
li {
  height: 120px;
  border-bottom: 1px solid gray;
}
#fixed {
  height: 400px;
  overflow: auto;
}
</style>

//controller
var App = angular.module("App", []);
App.controller("ControllerIndex", function($scope, $http, $resource) {
  $scope.items = [];
  page = 1;
  $scope.loadMore = function() {
    $http({
      url: "http://example.com/api.php",
      data: "page=" + page,
      method: "post",
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function(response){
      for(var i=0; i<response.length; i++) {
        $scope.items.push(response[i]);
      }
      page++;
   });
  };
  $scope.loadMore();
});

// direcitive
App.directive('whenScrolled', function() {
  return function(scope, elm, attr) {
    var raw = elm[0];
    elm.bind('scroll', function() {
      if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
        scope.$apply(attr.whenScrolled);
      }
    });
  };
})

http://jsfiddle.net/vojtajina/U7Bz9/
こちらのページを参考にさせて頂きました。
ちなみにスクロール部分でこの方法だとcssの定義が必須となります。

htmlだけで実装したい場合は、こちらのページにやりかた書いてあったので参考にしてください
http://stackoverflow.com/questions/26856705/angular-binding-to-scroll-event-not-working

ngInfiniteScroll使うともっと簡単そうなのでこれも試してみようと思います。ただjqueryが必須と書いてあった気がしたのですが、、、

以上です