Watch element position and react to changes in AngularJS
<p>I'm working with a fairly complex view in AngularJS, but only a small number of elements are scrolled into view on the page at any one time.  So ideally I want to be able to pause watchers on the children of elements that are scrolled off screen, for performance purposes.</p>

<p>The scrollbar I'm using seems to "virtually" scroll by adjusting its "top" property.  So my markup looks like this when it's partially scrolled down:</p>

<pre><code>&lt;div id="mCSB_3_container" class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x" style="position: relative; top: -123px; left: 0px; width: 100%;" dir="ltr"&gt;
    &lt;div id="table-1" pause-watchers&gt;&lt;/div&gt;
    &lt;div id="table-2" pause-watchers&gt;&lt;/div&gt;
    &lt;div id="table-3" pause-watchers&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>So in my "pauseWatchers" directive I'm trying to watch the table elements' offset positions and do further processing if they're beyond the boundaries of the screen.  This is what I have so far:</p>

<pre><code>app.directive('pauseWatchers', function(){
return {
    link: function (scope, element) {

        scope.$watch(function () {
                        return element.offset().top; 
                    },
                    function (newValue, oldValue) {
                        console.log(newValue + ' : ' + oldValue);
                        if (newValue !== oldValue) {
                          //further processing goes here
                        }
                    }
        );
    }
}
});
</code></pre>

<p>The watcher isn't working how I need it to.  Basically the only time it picks up the offset value is on page load and if I click the element.</p>

<p>How do I make it watch for changes to the offset value?</p>