After scroll not calling load more function in infinite scroll

Question

I'm developing application with Angular material.

Same code work with angular application but does not work with angular material.

Here is my controller code

   $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;
    };

Here is my view code

<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>

After successful request I'm sending response to the onResponse() function. First time it's giving me 20 records but when I scroll down the page it's not calling the loadMore() function from view

Same type of example I implemented in angular js only it's working but don't know Why this is not working with angular material.

Please help me out from this stuff.