Infinite scrolling issue - angularjs

Question

I found example of infinite scrolling and tried to perform it the same, but after fixing all mistakes I've found it still doesn't work.
Here's the directive:
module.exports = /*#ngInject*/
function scrollDirective($rootScope) {
return {
link: function (scope, elm, attr) {
var raw = elm[0];
elm.bind('expressly', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attr.scrollDirective);
}
});
}
};
};
Then how it goes on in controller (I have JSON-data in promise)
module.exports = /*#ngInject*/
function cardController($scope, dataFactory) {
var promise = dataFactory.get();
promise.then(function(data) {
$scope.data = data;
$scope.items = [];
//$scope.items.push($scope.data[0]);
var counter = 0;
$scope.loadMore = function() {
for (var i = counter; i < counter+9; i++) {
$scope.items.push($scope.data[i]);
}
counter += 9;
};
$scope.loadMore();
}, function(reason) {
console.log('Failed: ' + reason);
});
};
And finally html:
<div class="mdl-grid" scroll-directive="loadMore()">
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone" ng-repeat="item in items">
<md-card>
<img ng-src="{{ item.url }}" class="md-card-image">
<md-card-content>
<md-icon ><i class="material-icons md-36 md-album">photo_album</i></md-icon>
<h3 class="md-title">{{ item.title }}</h3>
</md-card-content>
</md-card>
</div>
</div>

Answer 1

Actually it turned up pretty simple. In directive instead of elm I used $document and pass parameter i to the function. After exploring the guts of i, I found all parameters I needed through i.target.activeElement. Here is the solution:
function scrollDirective($rootScope,$document) {
return {
link: function (scope, elm, attr) {
var raw = elm[0];
$document.bind('scroll', function (i) {
if (i.target.activeElement.scrollTop+i.target.activeElement.offsetHeight +5>= i.target.activeElement.scrollHeight){
scope.$apply(attr.scrollDirective);
}
});
}
};
};