title: Angularjs: How to trigger event when scroll reaches to the bottom of the scroll bar in div?
body: <p>I'm trying to trigger an event when scroll bar reaches the end. I found this <a href="http://jsfiddle.net/ADukg/4831/" rel="noreferrer">this example</a>. Here is my code. The problem is that it doesn't call loadmore() at all.
  The values of the console statments are:</p>
  
  <pre><code>848
  899
  in scroll
  881
  899
  in scroll
  892
  899
  in scroll
  897
  899
  in scroll
  900
  899
  </code></pre>
  
  <p>It seems that it never goes to that if statement! The weird part is that if I debug it in inspect element then it triggers the event. 
      
         
         .....
      
  my directive:</p>
  
  <pre><code>directive('scrolly', function () {
      return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              var raw = element[0];
              console.log('loading directive');
              element.bind('scroll', function () {
                  console.log('in scroll');
                  console.log(raw.scrollTop + raw.offsetHeight);
                  console.log(raw.scrollHeight);
                  if (raw.scrollTop + raw.offsetHeight == raw.scrollHeight) { //at the bottom
                      scope.$apply(attrs.scrolly);
                  }
              })
          }
      }
  </code></pre>