Dynamic ng-model directive linked to a search input having problems filtering dynamically filled results by the ng-repeat loop

So, here is a link to the code http://plnkr.co/edit/Rrn6EA0nidatGWjMlwkw?p=preview

Problem Since I am using an ion-infinite-scroll directive and a for loop to dynamically fill the feed tab with content I can't get the search input to work, however when I was using the data.json file statically calling it once and getting everything the search input was working. I have guesses why it is not working but they are not really helping me

here is the code in case it catches someone's eye HTML

<div class="bar bar-subheader 
  item-input-inset bar-light">
  <label class="item-input-wrapper">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="search" ng-model="query" placeholder="Search for post">
  </label>
</div>
<ion-content class="has-subheader">
    <ion-refresher on-refresh="load()">
    </ion-refresher>
    <ion-list>
        <ion-item ng-repeat='post in posts track by post.id | filter: query ' class='item-thumbnail-left item-text-wrap' href="#/tab/list/{{post.id}}">
            <img ng-src='{{post.photo}}' />
            <div>
            <p class='shortText titleArticle'>
                {{post.title | limitTo: 33}}
                {{ post.title.length > 33 ? '&hellip;' : '' }}
            </p>    
            <img class='articleAuthImg' src="http://cliparts.co/cliparts/kT8/oja/kT8oja7xc.png" alt="StoyanGenchev-author" />    
            </div>
            <div class='articleInfo'>
            <h2>{{post.author}}</h2>
            <h4>{{post.date}}</h4>
            <h4 class="category">{{post.category}}</h4>
            </div>
            <div class="clear"></div>
            <p class='shortText'>
                {{post.description | limitTo: 200}}
                {{ post.description.length > 200 ? '&hellip;' : '' }}
            </p>
        </ion-item>
    </ion-list> 
    <ion-infinite-scroll
    ng-if="noMore()"    
    on-infinite="get_more()"
    distance="15%"
    >
  </ion-infinite-scroll>
</ion-content>

APP.JS

starter.controller('ListController', ['$scope', '$http', '$stateParams',
function($scope, $http, $stateParams) {

$scope.posts = [];  
var startingPoint = 0;
var limit = 1;

$scope.load=function(startingPoint, limit){

$http.get('data.json').success(function(data) {

  for(var i = startingPoint; i<=limit; i+=1){
      $scope.posts.push(data.posts[i]);
      $scope.id=$stateParams.id;
  }

})
 .finally(function(){
                $scope.$broadcast('scroll.refreshComplete');
                $scope.$broadcast('scroll.infiniteScrollComplete');
            });

};

$scope.get_more = function(){
            $scope.load(startingPoint, limit);
            limit+=2;
            startingPoint+=2;
        };   

$scope.noMore = function(){
    return ($scope.posts.length > 50) ? false : true;
};

  }]);

ANY HELP WILL BE APPRECIATED