title: AngularJS + Material Design break infinite scroll
body: <ol>
  <li><p>Problem: infinite scroll starts loading all pages at once, instead of waiting for a user scrolling to the page bottom.</p></li>
  <li><p>Setup:
  AngularJS 1.3.17
  Materials Design 0.10.0
  Infinite scroll script: <a href="https://github.com/sroze/ngInfiniteScroll" rel="nofollow">https://github.com/sroze/ngInfiniteScroll</a>
  Following this demo: <a href="http://sroze.github.io/ngInfiniteScroll/demo_async.html" rel="nofollow">http://sroze.github.io/ngInfiniteScroll/demo_async.html</a></p>
  
  <p>The page with the infinite scroll is inside the nested view.</p></li>
  </ol>
  
  <p>HTML directive used like this:</p>
  
  <pre><code>&lt;div class="row row-sm"&gt;
      &lt;div infinite-scroll='nextPage()' infinite-scroll-disabled='busy' infinite-scroll-distance='0' class="m-l-n m-r-n"&gt;
          &lt;div class="col-sm-12" ng-repeat="post in posts" ng-init="parentIndex = $index"&gt;
  </code></pre>
  
  <ol start="3">
  <li>Symptoms: 
  
  <ul>
  <li>it starts firing requests in sequence until no more data is coming from API. Impressions is that it thinks that we hit the page bottom all the time = a signal to load one more page.</li>
  <li>the same code was working perfectly before migration to Material Design (from 100% Bootstrap)</li>
  <li> with the ng-repeat contains class="col-sm-12", if removed OR if I set style="float:none" it loads the first page only, BUT does not react on reaching the page bottom any more.</li>
  </ul></li>
  </ol>
  
  <p>Also, I do not need a windowed-solution (this one works fine), rather - Facebook type, when we actually need to reach a page bottom, not to scroll in a limited space.</p>
  
  <p>Please let me know what kind of additional information you may need.</p>
  
  <p>Guys, please help!! :)</p>
  
  <p>Thank you!</p>