Angularjs infinite scroll pagination

var app = angular.module('scrollApp', []);

app.controller('scrollCtrl', function($scope) {
  $scope.title = 'Angularjs infinite scroll pagination';
  $scope.users =[];
});


app.directive('infiniteScroll', [
  '$rootScope', '$window', '$http',
  function($rootScope, $window, $http) {
    return {
      link: function($scope, $element, $attrs) {
        window.angular.element($window).bind('scroll', function() {

          // start fetching users in 100 pixels space in bottom of the page
          clientHeight = html.scrollHeight - 100;
          scrollHeight = html.scrollTop + document.querySelector('body').clientHeight;

          // request for further users only if at the bottom of the page and no other request are in progress
          if (clientHeight <= scrollHeight && $rootScope.makeInfiniteCall) {

            // prevent further fetchings 
            $rootScope.makeInfiniteCall = false;

            // Fetch you users here and push it to scope, then let further Api requests happen
            $http.get('/path/to/Api').then(function(result) {
              // unshift items if the sequence is important
              for (var i = result.data.length - 1; i == 0; i--) {
                $scope.users.unshift(result.data[i]);
              }
              // or simply concat the entire array if the sequence of items is not important
              // $scope.users.concat(result.data);
              $rootScope.makeInfiniteCall = false;
            });

          }
        });
      }
    }
  }
]);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>AngularJS infinite scroll pagination</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
  <script>
    var app = angular.module('scrollApp', []);

    app.controller('scrollCtrl', ['$scope', function($scope) {
      $scope.title = 'AngularJs Infinite Scroll Pagination';
      $scope.users = [];
    }]);

    //Directive for infinite scroll pagination.
    app.directive('infiniteScrollPagination', ['$rootScope', '$window', '$http',
      function($rootScope, $window, $http) {
        return {
          link: function($scope, $element, $attrs) {
            window.angular.element($window).bind('scroll', function() {

              // start fetching users in 100 pixels space in bottom of the page
              defaultClientHeight = html.clientScrollHeight - 100;
              clientScrollHeight = html.scrollTop + document.querySelector('body').defaultClientHeight;

              // request for further users only if at the bottom of the page and no other request are in progress
              if (defaultClientHeight <= clientScrollHeight && $rootScope.clientInfiniteCall) {

                // prevent further fetchings 
                $rootScope.clientInfiniteCall = false;

                  // Fetch you users here and push it to scope, then let further Api requests happen
                  $http.get('/path/to/Api').then(function(result) {
                    if (!result) {
                      var data = result.data;
                      if (data.length > 0) {
                        // unshift items if the sequence is important
                        for (var i = data.length - 1; i == 0; i--) {
                          $scope.users.unshift(data[i]);
                        }
                        $rootScope.clientInfiniteCall = false;
                      }
                    }
                  });
              }
            });
          }
        }
      }
    ]);
  </script>
</head>

<body ng-app="scrollApp" ng-controller="scrollCtrl">
  <h2>{{title}}</h2>
</body>

</html>

/* Put your css in here */