Infinite Scrolling in AngularJs

app = angular.module("demo", []);

app.controller("MainController", function($scope, $http){
  
  // the array which represents the list
  $scope.items = ["1. Scroll the list to load more"];
  $scope.loading = true;
  
  // this function fetches a random text and adds it to array
  $scope.more = function(){
    $http({
      method: "GET",
      url: "https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1"
    }).success(function(data, status, header, config){
      
      // returned data contains an array of 2 sentences
      for( var line in data ){
        newItem = ($scope.items.length+1)+". "+data[line];
        $scope.items.push(newItem);
      }
      $scope.loading = false;
    });
  };
  
  // we call the function twice to populate the list
  $scope.more();
});

// we create a simple directive to modify behavior of <ul>
app.directive("whenScrolled", function(){
  return{
    
    restrict: 'A',
    link: function(scope, elem, attrs){
    
      // we get a list of elements of size 1 and need the first element
      raw = elem[0];
    
      // we load more elements when scrolled past a limit
      elem.bind("scroll", function(){
        if(raw.scrollTop+raw.offsetHeight+5 >= raw.scrollHeight){
          scope.loading = true;
          
        // we can give any function which loads more elements into the list
          scope.$apply(attrs.whenScrolled);
        }
      });
    }
  }
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
  <script src="app.js"></script>
</head>

<body>
  <div data-ng-app="demo">
    <div data-ng-controller="MainController">
      <ul when-scrolled="more()" class="hello">
        <li data-ng-repeat="item in items">
          {{item}}
        </li>
      </ul>
      <div data-ng-show="loading">Loading</div>
    </div>
  </div>
  <h1>INFINITE SCROLLING IN ANGULARJS</h1>
</body>

</html>

/* Put your css in here */
li{
  display:block;
  list-style-type:none;
  margin-bottom: 1em;
}

ul{
  height:250px;
  background: #44E394;
  color: #fff;
  overflow:auto;
  width:550px;
  border-radius: 5px;
  margin:0 auto;
  padding: 0.5em;
  border: 1px dashed #11BD6D;
}
ul::-webkit-scrollbar{
    width:8px;
    background-color:transparent;
}
  ul::-webkit-scrollbar-thumb{
    background-color:#b0fccd;
    border-radius:10px;
  }
  ul::-moz-scrollbar{
    width:8px;
    background-color:transparent;
  }
  ul::-moz-scrollbar-thumb{
    background-color:#b0fccd;
    border-radius:10px;
  }
  ul::-ms-scrollbar{
    width:8px;
    background-color:transparent;
  }
  ul::-ms-scrollbar-thumb{
    background-color:#b0fccd;
    border-radius:10px;
  }

body{
  text-align:center;
  font-size:1.2em;
  font-family: "Helvetica";
  color: #44E394;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQIW2P88OHDfwY0wAgSFBAQYEQWp1AQAKUbE9XRpv7GAAAAAElFTkSuQmCC) repeat;
  padding: 2em;
}

Infinite scrolling in Angularjs
-----------------------------------------

Exploring how directives are written and wired into the app.