angularjs - スクロール後、無限スクロールで load more 関数を呼び出さない

Question

Angular マテリアルを使用してアプリケーションを開発しています。

同じコードは角度のあるアプリケーションでは機能しますが、角度のある素材では機能しません。

これが私のコントローラーコードです

   $scope.casesData = [];
   var casesData = {};

   $scope.first = 0;
   $scope.last = 20;



    var onResponse = function(response){        
        casesData = response;   
        $scope.loadMore();
    };
    $scope.loadMore = function () {
            for ($scope.first; $scope.first < $scope.last; $scope.first++) {
                if(casesData[$scope.first] !== undefined)
                    $scope.casesData.push(casesData[$scope.first]);
            }
            $scope.last = $scope.last + 20;
    };

これが私のビューコードです

<div infinite-scroll="loadMore()" infinite-scroll-distance="3" infinite-scroll-immediate-check="false">
       <div ng-repeat="(key,value) in casesData">
                <div>
                   //Do some stuff
                </div>
                <!-- Recent records listing -->
                <md-item class="item" ng-repeat="case in value track by case.index_no" ng-class="">
                //Do some stuff
               </md-item>
    </div>
 </div>

リクエストが成功した後、onResponse()関数にレスポンスを送信しています。初めて20個のレコードが表示されますが、ページを下にスクロールするとit's not calling the loadMore()ビューから機能します

angular jsで実装したのと同じタイプの例のみが機能していますが、なぜこれが角度のある素材で機能しないのかわかりません。

このようなものから私を助けてください。