AngularJS Infinite Scroll in scrolling div

infinite-scroll module in nested container does not work as expected.

by HemalathaThanigaivel

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.2/ng-infinite-scroll.js"></script>
<div ng-controller="appController">

    <h1>This is my {{title}} Items: {{numberToDisplay}}/1000</h1>

    <div class="col-sm-4 min-padding">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search term" data-ng-model="searchTerm">
        </div>
    </div>

    <div class="constrained">
        <table class="table table-striped" id="loggingTable" infinite-scroll="loadMore()" infinite-scroll-container='".constrained"' infinite-scroll-distance="1" infinite-scroll-parent="true">
            <tr data-ng-show="logEventFilter.length === 0">
                <td class="center" colspan="3">Nobody is here</td>
            </tr>

            <tr data-ng-repeat="logEvent in logEventFilter = (logEvents | filter:searchTerm | limitTo:numberToDisplay) track by $index">
                <td> {{$index}} </td>
                <td> {{logEvent.name}} </td>
                <td> {{numberToDisplay}} </td>
            </tr>
        </table>
    </div>

</div>

CSS

.constrained {
    margin: 10px;
    padding: 10px;
    height: 200px;
    overflow: auto;
    border: 1px solid lightgray;
}

JavaScript

var app = angular.module('app', ['infinite-scroll'])
       .controller('appController', appController);

   appController.$inject = ['$scope', '$window'];

   function appController($scope, $window) {

       $scope.title = "infinite scroll example";
       $scope.searchTerm = "";
       $scope.numberToDisplay = 20;

       $scope.logEvents = [];
       for (var i = 0; i < 1000; i++) {
           $scope.logEvents.push({
               name: "Hello, my name is " + i
           });
       }

       $scope.loadMore = function() {
       setTimeout(() => {
       	if ($scope.numberToDisplay + 5 < $scope.logEvents.length) {
               $scope.numberToDisplay += 5;
           } else {
               $scope.numberToDisplay = $scope.logEvents.length;
           }
       }, 1000)
           
       };
   };