Scroll event is not fired inside directive - angular.js

Question

I'm stucked with problem. I have a directive for infinite-scroll where I listen for `scroll` event. The problem is that scroll event is only fired when I'm binding to `$window`: ``` angular.element($window).bind('scroll', function () { console.log('Gogo!'); //works! }); element.bind('scroll', function () { console.log('Gogo!'); //doesn't work... :((( }); ``` Directive is inside `ng-view` I found this question, looks very similar to my problem - Binding to events in a directive which is inside a ng-view doesn't work Anybody knows how to solve this? My directive: ``` directives.directive('scrolly', function () { return { restrict: 'A', link: function (scope, element, attrs) { var raw = element[0]; element.bind('scroll', function () { if (raw.scrollTop + raw.offsetHeight > raw.scrollHeight) { scope.$apply(attrs.scrolly); } }); } }; }); ``` My view: ```

{{item.name}}

```

Accepted Answer

I have created a fiddle for you here: http://jsfiddle.net/ADukg/4831/

The interesting thing is that I used your exact code, and everything seems to trigger fine (see all the littered `console.log()` calls). I suspect your problem has to do with your CSS styling though, as without the right use of overflow, I could not get the scroll event to trigger.

Scroll event is not fired inside directive - angular.js

Solution

Problem