Can't get ngInfiniteScroll to stop scrolling

Question

I have a fairly simple web page that I cannot get to work properly. I am using AngularJS, Foundation, and ngInfiniteScroll. With this template:

<div class="row">
  <div class="small-12 columns" style="max-height:500px;overflow-y:scroll">
    <div infinite-scroll="loadMore()" infinite-scroll-distance="0" infinite-scroll-parent="true" infinite-scroll-disabled="loading || !hasMore">
      <div ng-repeat="item in items | filter:search | orderBy:'-last_modified'">
        <div class="row" ng-click="selectItem(item)">
          <div class="small-3 medium-4 columns text-left">
          <img ng-if="item.thumb2" ng-src="{{ item.thumb }}">
          </div>
          <div class="small-9 medium-8 columns">
            <div> Name: {{ item.name }} </div>
            <div> Last Modified: {{ item.last_modified }} </div>
          </div>
        </div>
      </div>
      <div style="clear: both;"> &nbsp; </div>
    </div>
  </div>
</div>

... the loadMore() function is repeatedly called forever. I have made other similar web pages in the past with nearly identical code and it behaves as expected. For the life of me I can't figure out what's going on here. Is there anything obvious in this code that would lead to loadMore() being called even when the page extends well beyond the bottom of the browser window? If not, where can I look next to troubleshoot this?

Answer 1

I don't know if you ever found an answer for this, but there was a bug introduced in version 1.2.2 which caused this behaviour. Rolling back to an earlier version (1..0.0) fixed this for me. More here: https://github.com/sroze/ngInfiniteScroll/issues/235