title: Multiple ion-scroll both with infinite scroll
body: <p>I have two ion scroll tags. Inside each of these ion-scroll tags is a list. Each of these lists start with 10 items, and when a user reaches the bottom of a particular ion scroll it should load more. The problem I am facing is this is quite not working correctly. If I scroll through the first it scroll window and paginate through all the items it should say no more content. This does not happen though, instead if I scroll through the second scroll window then it will load more items in the first and second ion scroll window(which I don't want). Essentially I would like the two ion scrolls to be completely independent of each other. I would like each to load it's own content. I hope that made sense. Here is my codepen: </p>
  
  <p><a href="http://codepen.io/polska03/pen/jWKRwP" rel="noreferrer">http://codepen.io/polska03/pen/jWKRwP</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
  
      &lt;title&gt;Ionic Pull to Refresh&lt;/title&gt;
  
      &lt;link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"&gt;
      &lt;script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body ng-app="ionicApp" ng-controller="MyCtrl" class="background-places"&gt;
  
      &lt;ion-view&gt;
      &lt;ion-content class="" scroll='false'&gt;
          &lt;ion-scroll style="height:50%"&gt;
              &lt;ion-list&gt;
                  &lt;ion-item collection-repeat="list in _list"&gt;
                      &lt;h2&gt;Item&lt;/h2&gt;
                  &lt;/ion-item&gt;
              &lt;/ion-list&gt;
              &lt;button class="button button-full button-outline button-positive" ng-if="noMoreContent"&gt;
        No more Content
     &lt;/button&gt;
              &lt;ion-infinite-scroll ng-if="canWeLoadMoreContent()" on-infinite="populateList()" distance="1%"&gt;
              &lt;/ion-infinite-scroll&gt;
          &lt;/ion-scroll&gt;
  
  &lt;hr&gt;
  &lt;hr&gt;
  
          &lt;ion-scroll style="height:50%"&gt;
              &lt;ion-list&gt;
                  &lt;ion-item collection-repeat="list2 in _list2"&gt;
  
                      &lt;h2&gt;Item&lt;/h2&gt;
  
                  &lt;/ion-item&gt;
              &lt;/ion-list&gt;
  
  
  
              &lt;button class="button button-full button-outline button-positive" ng-if="noMoreContent2"&gt;
         No More Content
       &lt;/button&gt;
              &lt;ion-infinite-scroll ng-if="canWeLoadMoreContent2()" on-infinite="populateList2()" distance="1%"&gt;
              &lt;/ion-infinite-scroll&gt;
          &lt;/ion-scroll&gt;
  
      &lt;/ion-content&gt;
  
  &lt;/ion-view&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>angular.module('ionicApp', ['ionic'])
  
    .controller('MyCtrl', function($scope) {
  
  
  
  
  
  
    $scope._list = [];
  
    $scope.populateList = function() {
      for (var i = 0; i &lt;= 9; i++) {
  
  
        $scope._list.push({});
      }
      console.log($scope._list.length);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    }
  
    $scope.noMoreContent = false;
  
    $scope.canWeLoadMoreContent = function() {
      if($scope._list.length &gt; 15) {
        $scope.noMoreContent = true;
  
        return false;
      }else{
        return true;
      }
    }
    $scope.populateList();
  
  
  
  
  
    $scope._list2 = [];
  
    $scope.populateList2 = function() {
      for (var i = 0; i &lt;= 9; i++) {
  
  
  
        $scope._list2.push({});
  
      }
      console.log($scope._list2.length);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    }
  
    $scope.noMoreContent2 = false;
  
    $scope.canWeLoadMoreContent2 = function() {
      if($scope._list2.length &gt; 15) {
        $scope.noMoreContent2 = true;
  
        return false;
      }else{
        return true;
      }
    }
  
  
  
    $scope.populateList2();
  
  
  
  
  });
  </code></pre>