Onsen-UI on-scrolled function is not called

Question

I'm using ons-scroller to load data from some site using $http. But, the function I passed to on-scrolled is never called. Here is my code.

HTML

<ons-scroller infinite-scroll-enable="true" on-scrolled="loadMore()">
  <ons-list>
    <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="post in posts">
        <ons-row>
          <ons-col width="95px">
            <div class="thumb-wrapper">
                <img src="{{post.thumbnail}}" class="thumbnail" alt="Blog image">   
            </div>
          </ons-col>
          <ons-col>
    <div class="name">
        {{post.title}}
    </div>
    <div class="location">
        {{post.description}}
    </div>
          </ons-col>

        </ons-row>
      </ons-list-item>
  </ons-list>
</ons-scroller>

AngularJS

var offset = 0;

$scope.posts = [];

$scope.loadMore = function(){
    if(offset == 0){
        $http({
            method: "GET",
            url: domain + "blog/list",
        })
        .success(function(data){
            $scope.posts = data.response.posts;
            offset++;
            $scope.loadMore();
        });
    }else{
        $http({
            method: "GET",
            url: domain + "blog/list",
            params: {
                offset: offset,
            }
        })
        .success(function(data){
            for(i = 0; i < data.response.posts.length; i++){
                $scope.posts.push(data.response.posts[i]);
            }
            offset++;
            if(data.response.posts.length == 0){
                return;
            }
            $scope.loadMore();
        });
    }
}
$scope.loadMore();

I'm calling loadMore(); manually in my controller.