# Ion-infinite-scroll with angular limitTo

**URL:** <https://forum.ionicframework.com/t/ion-infinite-scroll-with-angular-limitto/16910>\
**Category:** ionic-v1\
**Created:** [February 4, 2015, 12:58am UTC](https://forum.ionicframework.com/t/ion-infinite-scroll-with-angular-limitto/16910 "2015-02-04T00:58:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![meatloaf4](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/meatloaf4/32/107396_2.png) [@meatloaf4](https://forum.ionicframework.com/u/meatloaf4)\
**Post date:** [February 4, 2015, 12:58am UTC](https://forum.ionicframework.com/t/ion-infinite-scroll-with-angular-limitto/16910/1 "2015-02-04T00:58:18Z")

</div>

I can’t seem to get this code to work, although I think I know the problem. It seems by increasing my limitTo amount it doesn’t increase the size of my scroll box and thus won’t allow me to view my content. Any suggestions or ideas on how to fix it? Here is my code below.

angular.module(‘va\_disability.ecfr’, [])

```
.controller('EcfrCtrl', ['$scope', '$state', '$http', 'ecfrService', function EcfrCtrl($scope, $state, $http, ecfrService) {

       
    $scope.items = [];
    $scope.ecfr = {};

    if($scope.items.length <= 0 ) {
        $scope.items = ecfrService.documentList;
        console.log(ecfrService.documentList);
    }
    $scope.ecfr.totalToDisplay = 10;

    $scope.loadMore = function () {
        $scope.ecfr.totalToDisplay += 10;
        console.log($scope.items);
        console.log($scope.items.length);
        console.log($scope.ecfr.totalToDisplay);
        $scope.$broadcast('scroll.infiniteScrollComplete');
    };
    $scope.$on('$ionicView.afterEnter', function(){
        $scope.vanav.hidesubheader = 'add-height';
    });

    $scope.$on('$ionicView.beforeLeave', function(){
        $scope.vanav.hidesubheader = 'hide-sub-header';
    });

}]);

```

```
    <div id="ecfr-content" class="list card" style="margin-top:10px;">
        <div ng-repeat="item in items | filter:vanav.filters | limitTo:ecfr.totalToDisplay"
            class="item item-text-wrap">
            <h1>{{item.largeHead}}</h1>
            <h2>{{item.head}}</h2>
            <div ng-bind-html="item.blurb"></div>
            <br />
            <h2>{{item.tablesHead}}</h2>
            <div ng-bind-html="item.tables"></div>
        </div>
        <ion-infinite-scroll distance="2%"
                             on-infinite="loadMore()"
                ></ion-infinite-scroll>
    </div>
</ion-content>

```

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [February 4, 2015, 1:04am UTC](https://forum.ionicframework.com/t/ion-infinite-scroll-with-angular-limitto/16910/2 "2015-02-04T01:04:06Z")

</div>

Try using `$ionicScrollDelegate.resize()` in your loadMore function.

> [@Ng-if and scroll ability update](http://forum.ionicframework.com/t/ng-if-and-scroll-ability-update/16049/2):
>
> You can resize the scroll window when they click the button so you don’t need to wait for it to resize: [$ionicScrollDelegate.resize()](http://ionicframework.com/docs/api/service/%24ionicScrollDelegate/) Check this codepen (click the add items button): [http://codepen.io/anon/pen/JoNpVq?editors=101](http://codepen.io/anon/pen/JoNpVq?editors=101)

---

<div class="post-metadata">

**Author:** ![meatloaf4](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/meatloaf4/32/107396_2.png) [@meatloaf4](https://forum.ionicframework.com/u/meatloaf4)\
**Post date:** [February 4, 2015, 6:49am UTC](https://forum.ionicframework.com/t/ion-infinite-scroll-with-angular-limitto/16910/3 "2015-02-04T06:49:05Z")

</div>

You are always coming to my rescue. That worked like a charm, thank you!

---

<div class="post-metadata">

**Author:** ![meatloaf4](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/meatloaf4/32/107396_2.png) [@meatloaf4](https://forum.ionicframework.com/u/meatloaf4)\
**Post date:** [February 4, 2015, 7:46pm UTC](https://forum.ionicframework.com/t/ion-infinite-scroll-with-angular-limitto/16910/4 "2015-02-04T19:46:57Z")

</div>

I noticed there is a bit of delay until the results are loaded and the scroll actually re-sizes without any indicator. Is there a way that I can get the loading indicator to show up until this actually takes place?

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [February 4, 2015, 9:28pm UTC](https://forum.ionicframework.com/t/ion-infinite-scroll-with-angular-limitto/16910/5 "2015-02-04T21:28:25Z")

</div>

Is the indicator showing up at all? I know there have been reported issues of it not showing. It doesn’t show up at all in my app.

> **[Why I cannot see my infinite scrolling loading icon when use collection-repeat](http://forum.ionicframework.com/t/why-i-cannot-see-my-infinite-scrolling-loading-icon-when-use-collection-repeat/15983?u=brandyshea)**
>
> I am using beta14, I have following code in my view for pagination: But the...

---

<div class="post-metadata">

**Author:** ![meatloaf4](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/meatloaf4/32/107396_2.png) [@meatloaf4](https://forum.ionicframework.com/u/meatloaf4)\
**Post date:** [February 5, 2015, 8:29pm UTC](https://forum.ionicframework.com/t/ion-infinite-scroll-with-angular-limitto/16910/6 "2015-02-05T20:29:53Z")

</div>

No currently it’s not showing up at all in my application.