Angular directive to detect scrolling within an ng-repeat container - angularjs

Question

In my Angular app, I've created a simple directive to do something on scroll, based on the answer provided to a similar question here.
Here is the code to my onScroll directive:
(function() {
'use strict';
angular
.module('proverbial')
.directive('onScroll', Directive);
Directive.$inject = [ '$document' ];
function Directive($document) {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs) {
element.bind('scroll', function(e) {
console.warn(e)
if (element[ 0 ].scrollTop + element[ 0 ].offsetHeight >= element[ 0 ].scrollHeight) {
scope.$apply(attr.onScroll);
}
});
}
}
})();
This is to be used in the following HTML template:
<div class="absolute" on-scroll="vm.totalDisplayed += 100">
<span class="card hover"
ng-repeat="proverb in vm.proverbs | limitTo: vm.totalDisplayed">
<a>{{proverb.text | maxLength: 90}}</a>
</span>
</div>
The intention is to keep increasing vm.totalDisplayed on page scroll, to create an effect similar to lazy-loading.
However, when I scroll down to the end of what has been already loaded with ng-repeat, nothing happens. The console.warn(e) never triggers.
On the browser console I can see that the containing <div class="absolute" on-scroll="vm.totalDisplayed += 100"> does indeed scroll up past the browser's window.
What's missing?

Answer 1

You have a minor mistake in your code:
if (element[ 0 ].scrollTop + element[ 0 ].offsetHeight >= element[ 0 ].scrollHeight) {
scope.$apply(attr.onScroll);
}
attr is undefined. Should be attrs.
Furthermore, I can't reproduce the problem. I've created a Plunker from your code and the warning shows just fine. Only thing what I find weird is that I couldn't get vm.totalDisplayed += 100 to work. vm.totalDisplayed = vm.totalDisplayed + 100 worked though.
http://plnkr.co/edit/ooMFG4ZAZzxJf9zuChyA

Answer 2

Despite #Tom pointing out correctly that I had a syntatic error in my directive, it turns out that that wasn't the issue.
The issue was that the element to which I attached my directive was not actually being scrolled due to its CSS styling, so I had to tweak the code slightly, by binding scroll to $document instead:
( function () {
'use strict';
var angular = window.angular || {};
angular
.module( 'proverbial' )
.directive( 'onDocumentScroll', Directive );
Directive.$inject = ['$document'];
function Directive( $document ) {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link( scope, element, attrs ) {
$document.bind( 'scroll', function () {
if ( $document.scrollTop() - scope.vm.latestThreshold >= element[0].offsetHeight ) {
scope.vm.latestThreshold += $document.scrollTop();
scope.$apply( attrs.onDocumentScroll );
}
} );
}
}
} )();
This solved my problem.