Infinite scrolling inside a directive

ionic-v1
1

I have the following setup:

app.directive('posts', function () {
    return {
        restrict: 'E',
        scope: {},
        templateUrl: '/templates/posts/includes/many.html',
        controller: function ($scope, $stateParams, PostService, $ionicLoading) {
            $scope.nextPage = 1;
            $scope.Posts = [];
            $scope.hasMore = function () {
                return true;
            };
            $ionicLoading.show({
                template: 'Loading...',
                noBackdrop: true
            });
            $scope.loadMore = function () {
                PostService.getAll($scope.nextPage).then(function (response) {
                    $ionicLoading.hide().then(function () {
                        $scope.Posts = $scope.Posts.concat(response.posts);
                        $scope.meta = response.meta;
                        $scope.nextPage++;
                        $scope.hasMore = function () {
                            return ($scope.nextPage <= $scope.meta.pagination.total_pages);
                        };
                    });
                }).finally(function () {
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                });
            };
        }
    }
});

All posts template:

<ion-view id="postsView" hide-back-button="true">
    <ion-content>
        <posts></posts>
    </ion-content>
</ion-view>

It shows a single post and if I try to scroll down it starts loading new posts, but doesn’t attach them to the current template. That means loadMore() is executed.

That’s /templates/posts/includes/many.html:

<div class="row" collection-repeat="Post in Posts">
    <div class="col">
        <div class="list card post">
            <div class="item item-avatar" ui-sref="app.user({id: Post.user.id})">
                <img src="img/no_avatar.jpg" ng-src="{{Post.user.getAvatar()}}">

            </div>

            <div class="item item-body item-no-padding" ui-sref="app.post({id: Post.id})"
                 style="background-image: url({{Post.image}});">
            </div>
        </div>
    </div>
</div>
<ion-infinite-scroll on-infinite="loadMore()" ng-if="hasMore()" distance="1%"></ion-infinite-scroll>