AngularJS (v1) simple directive which fire the listener on scroll finish

example.html

<div scroll-end="loadMore()">

scroll-end.directive.js

(function () {
    'use strict';

    angular
        .module('app', [])
        .directive('scrollEnd', scrollEndDirective);

    function scrollEndDirective() {
        return {
            restrict: 'A',
            link: link
        };

        function link(scope, element, attrs) {
            var visibleHeight = element.height();
            var threshold = 100;
            
            //TODO: add threshold
            element.bind('scroll', _onScrollHandler);

            function _onScrollHandler() {
                var scrollableHeight = element.prop('scrollHeight');
                var hiddenContentHeight = scrollableHeight - visibleHeight;

                if (hiddenContentHeight - element.scrollTop() <= threshold) {
                    scope.$apply(attrs.scrollEnd);
                }
            }
        }
    }
})();