Collection-repeat and ion-refresher form dupes


#1

In my app, I am using a collection-repeat to load a long list of objects and render them in a list of posts. I also have an <ion-refresher> that is used to reload and re-render the list. Essentially, posts are held in an array of object which is stored in $scope.posts. Initially I use the following code to retrieve posts:

PostService.getPosts(/*$scope.page*/).then(function (data) {
            $scope.posts = data.posts;
            $ionicLoading.hide();
});

Then, I use collection-repeat to render them:

<ion-view title="Feed" id="feed">
    <ion-content padding="false" class="has-header" >
        <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"></ion-refresher>
        <div class="list card" collection-repeat="post in posts">
            <!-- render stuff -->
        </div>
</ion-view>

And this function refreshes posts:

 $scope.doRefresh = function () {
        $scope.posts = []; 
        PostService.getPosts(/*0*/).then(function (data) {
            $scope.posts = data.posts
        });

        $scope.$broadcast('scroll.refreshComplete');
 };

On the initial load, everything run fine all the posts are loaded correctly. If I pull to refresh however, things go bad. With no new posts added, I pull to refresh and it adds all the already loaded posts again so there are two of every post. What am I doing wrong?