test/test_scroll_container.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Scroll Trigger</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
  <script src="../dist/scroll-trigger.js"></script>
  <script>
    angular.module('demo', ['scroll-trigger'])
    .config(function(ScrollTriggerProvider) {
      ScrollTriggerProvider.offset(200);
    })
    .controller('InfiniteScrollCtrl', function($scope) {
      $scope.imageUrls = [];
      $scope.loadMore = function() {
        $scope.$applyAsync(function() {
          for (var i = 0; i < 10; ++i) {
            $scope.imageUrls.push('http://lorempixel.com/g/200/200?_=' + Math.random());
          }
        });
      };
    });
  </script>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    section {
      position: absolute;
      width: 100%;
      height: 80%;
      top: 10%;
      overflow: scroll;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000
    }
    img {
      display: block;
      width: 200px;
      height: 200px;
      margin: auto;
    }
  </style>
</head>

<body ng-app="demo">
  <section ng-controller="InfiniteScrollCtrl" scroll-trigger="loadMore()"
      scroll-container trigger-at-end trigger-persist trigger-run>
    <img ng-repeat="imageUrl in imageUrls" ng-src="{{imageUrl}}" alt="some image">
  </div>
</body>

</html>