AngularJS Infinite Scroll in scrolling div

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

by kunalvashist

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>
<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>
                <div>Start Index {{startIndex}}</div>
                 <div>End Index {{endIndex}}</div>
            </div>
    <div class="constrained">
     
        <table class="table table-striped" id="loggingTable" infinite-scroll="loadMore(callback)" infinite-scroll-container='".constrained"' infinite-scroll-parent="true">
           
            
            <tr data-ng-repeat="logEvent in logEventFilter = (logEvents.slice(startIndex,endIndex)) 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

/*Throttle added 100*/
angular.module('infinite-scroll', []).value('THROTTLE_MILLISECONDS', 100).directive('infiniteScroll', [
    '$rootScope', '$window', '$interval', 'THROTTLE_MILLISECONDS', function($rootScope, $window, $interval, THROTTLE_MILLISECONDS) {
        return {
            scope: {
                infiniteScroll: '&',
                infiniteScrollContainer: '=',
                infiniteScrollDistance: '=',
                infiniteScrollDisabled: '=',
                infiniteScrollUseDocumentBottom: '=',
                infiniteScrollListenForEvent: '@'
            },
            link: function(scope, elem, attrs) {
                var changeContainer, checkInterval, checkWhenEnabled, container, handleInfiniteScrollContainer, handleInfiniteScrollDisabled, handleInfiniteScrollDistance, handleInfiniteScrollUseDocumentBottom, handler, height, immediateCheck, offsetTop, pageYOffset, scrollDistance, scrollEnabled, throttle, unregisterEventListener, useDocumentBottom, windowElement,position,scrollPosition;
                windowElement = angular.element($window);
                scrollDistance = null;
                scrollEnabled = null;
                checkWhenEnabled = null;
                container = null;
                immediateCheck = true;
                useDocumentBottom = false;
                unregisterEventListener = null;
                checkInterval = false;
                position = null;
                scrollPosition = null;
                height = function(elem) {
                    elem = elem[0] || elem;
                    if (isNaN(elem.offsetHeight)) {
                        return elem.document.documentElement.clientHeight;
                    } else {
                        return elem.offsetHeight;
                    }
                };
                offsetTop = function(elem) {
                    if (!elem[0].getBoundingClientRect || elem.css('none')) {
                        return;
                    }
     ...