<!DOCTYPE html>
<html ng-app="inview-example">

  <head>
    <script data-require="angular.js@1.2.14" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular.js"></script>
    <script src="https://rawgit.com/thenikso/angular-inview/master/angular-inview.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="exampleController">
    <h1>Homeless Man's Infinite Scroll</h1>
    
    <div in-view-container class="container">
      <div ng-repeat="item in items | limitTo: limit">
        <input type="text" ng-model="item.value" />
      </div>
      <span in-view="increaseLimit($inview)" ng-show="limit < items.length">Loading more...</span>
    </div>
  </body>

</html>
var app = angular.module('inview-example', ['angular-inview']);

app.controller('exampleController', function($scope, $timeout) {
  $scope.limit = 20;
  
  $scope.items = [];
  
  for(var i = 0; i < 500; i++){
    $scope.items.push({ value: i });
  }
  
  $scope.increaseLimit = function (actuallyIncrease) {
    if (actuallyIncrease) { //this will be passed the value of $inview from directive
      $timeout(function() {
        $scope.limit = $scope.limit + 20;
      }, 500);
    }
  };
});

/* Styles go here */
div.container {
  max-height: 150px;
  overflow-y: scroll;
}