Angularjs - unable to properly use directive when window scrolls
<p>I've followed this answer here: <a href="https://stackoverflow.com/questions/14878761/bind-class-toggle-to-window-scroll-event">Bind class toggle to window scroll event</a> as I need to bind class using <code>ngClass</code> when the window scrolls, and according to the above mentioned answer I should be able to do it like this:</p>

<pre><code>app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
             if (this.pageYOffset &gt;= 100) {
                 scope.boolChangeClass = true;
                 console.log('Scrolled below header.');
             } else {
                 scope.boolChangeClass = false;
                 console.log('Header is in view.');
             }
            scope.$apply();
        });
    };
});
</code></pre>

<p>but when it comes to use this code into my app, it is not firing the directive at all!</p>

<p>Here's my code:
<a href="http://codepen.io/nickimola/pen/dMNawj?editors=1010" rel="nofollow noreferrer">http://codepen.io/nickimola/pen/dMNawj?editors=1010</a></p>

<p>I tried to add a debugger, and I noticed that this directive it's called only when the window loads, but after that it is not called anymore.</p>

<p>What am I doing wrong here?</p>

<p>thanks for any help</p>