title: How to properly implement an infinite scrolling AngularJS table without JQuery?
body: <p>I have an AngularJS project (I don't use JQuery) where I need to display a table with users and load more as the user scrolls near the end of the page. I'm trying to implement this without relying on external libraries, since this is part of my requirements.</p>
  
  <p>I've checked several examples like <a href="http://adrichman.github.io/implementing-a-lazy-load-and-infinite-scroll-in-angularjs/" rel="nofollow noreferrer">this</a>, <a href="https://stackoverflow.com/questions/18204473/progressive-loading-in-ng-repeat-for-images-angular-js">this</a> and <a href="https://www.ibm.com/developerworks/community/blogs/3d274f0f-f47a-4bf0-91ec-8ebad479881b/entry/how_to_implement_a_table_with_lazy_loading_infinite_scroll_in_angularjs?lang=es" rel="nofollow noreferrer">this</a>. </p>
  
  <p>But so far, none of the examples I've checked have helped me implement the infinite scrolling as I expected. They use different ways to calculate when to trigger the call, and some of this values return undefined to me (i.e. people say clientHeight and scrollHeight have different values, but to me it's always the same one, the total height including scrolling space).</p>
  
  <p>I created a directive like the following:</p>
  
  <pre><code>usersModule.directive('whenScrollEnds', function($window) {
      return {
          restrict: "A",
          link: function(scope, elm, attr) {
  
            angular.element($window).bind('scroll', function() {
  
              var hiddenContentHeight = elm[0].scrollHeight - angular.element($window)[0].innerHeight;
  
              if ((hiddenContentHeight - angular.element($window)[0].scrollY) &lt;= (10 )) {
                angular.element($window)[0].requestAnimationFrame(function(){
                  scope.$apply(attr.whenScrollEnds);
                })
              }
  
            });
          }
      };
  });
  </code></pre>
  
  <p>This kind of works but there's the following problems/doubts which I hope someone can explain to me:</p>
  
  <ul>
  <li>It triggers too fast. I want the loading to trigger when I'm near the bottom of the scrollable space, like near 90% or so.</li>
  <li>The scrollHeight is only accesible through elm[0], angular.element($window)[0] has no scrollHeight property so it returns undefined, and elm[0] has no scrollY value.</li>
  <li>The scrollY value I get is the distance the scrollbar has moved from the top, minus the scrollbar length, but I feel like that value is wrong.</li>
  <li>Is binding the scroll event through angular.element($window).bind the right decision?</li>
  </ul>
  
  <p>How can I implement a proper infinite scrolling table? Am I using the correct variables? Please provide an answer that uses Javascript and AngularJS only, JQuery or libraries solutions won't help me.</p>