AngularJS ngInfiniteScroll keeps firing when I view

My scroll to the top launches mine infiniteSubjects()

. But this should only work when scrolling down. I have already looked at many posts but did not understand the solution. I've tried chatting with infinite-scroll-disabled

. Also tried sticking the 1003px height <div>

in different places at the bottom to take place. No cubes.: /

<div ng-app="mainApp" ng-controller="gridController" class="container">
    <div class="row" infinite-scroll="infiniteSubjects()" infinite-scroll-distance="0" >
        <div ng-repeat="subject in (filteredSubjects = (allSubjects | orderBy:subjectOrder | limitTo:subjectLimit))">

            <div class="col-md-2 subject-card">
                {{ subject.name }}
             ..more divs in here..
            </div>
        </div>
    <div style="clear:both; height:1003px;"> </div>
    </div>
</div>

      

        
        
        
      

    

Inside my controller:

$scope.infiniteSubjects = function() {
    console.log("scrolling");
    $scope.subjectLimit += 1;
};

      

        
        
        
      

    

I also ended up in the ng-infinite-scroll.js

file to see what heights were like scrolling by adding some console.logs

windowBottom = $window.height() + $window.scrollTop();
console.log("WINDOWBOTTOM " + windowBottom);

elementBottom = elem.offset().top + elem.height();
console.log("ELEMENT BOTTOM" + elementBottom);

remaining = elementBottom - windowBottom;
console.log("REMAINING" + remaining);

      

        
        
        
      

    

When the page loads:

WINDOWBOTTOM 1194
ELEMENT BOTTOM 1194
REMAINING 0

      

        
        
        
      

    

I don't think the bottom of the window and the bottom of the element should be the same. Why are they like this?

When I scroll down mine remaining

will increase by -100

When I scroll up mine remaining

will increase by 100

, but it never becomes positive since the page starts at 0