angularjs - 滚动后在无限滚动中不调用加载更多功能

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 中实现的相同类型的示例只是它可以工作，但不知道为什么这不适用于 Angular 材料。

请帮我解决这个问题。