Error implementing ngInfiniteScroll with an input type search and the browser viewport

I have some problems that I have not been able to solve, I would really appreciate it if you can help me.

1- I have an input type search in my ng-repeat to filter the articles but it only filters the first 6 articles that the ngInfiniteScroll shows at the beginning, but when I change the size of the browser to a smaller size how to use more smartphones or less, so for some reason if you filter the articles well but when you erase the text that I wrote suddenly all the articles that I have in the json appear.

2- I have to put infinite-scroll-distance in "0" because if I put it in 1 or 2 at the beginning of scrolling, all the articles appear.

app.controller('ItemListCtrl',['$scope','$rootScope','DataSource',function($scope,$rootScope,DataSource){
    DataSource.get('/json/news.json',function(data){
      $scope.itemData=data.slice(0,6);
      $scope.itemsData=data;
      $scope.selected=data[0];
    });
    $scope.loadMore=function(){
      if($scope.itemData===undefined||$scope.itemsData===undefined){
        return;
      }
      var last=$scope.itemData.length-1;
      for(var i=1;i<=6;i++){
        if($scope.itemData.length>=$scope.itemsData.length){
          break;
        }
        $scope.itemData.push($scope.itemsData[last+i]);
      }
    };
  }]).factory('DataSource',['$http',function($http){
    return{
      get:function(fileName,callback){
        $http.get(fileName).then(function(response){
          callback(response.data);
        },function(){
          console.log('error');
        });
      }
    };
  }]);
<section id="cd-team" class="cd-section" infinite-scroll='loadMore()' infinite-scroll-distance='0'>
  <div class="cd-container">

    <form autocomplete="off" accept-charset="UTF-8">
      <input type="search" id="search" placeholder="Filtrar noticias..." ng-model="search.title">
    </form>

    <ul>

      <li ng-repeat="item in itemData | orderBy:'-id' | filter:search as results">
        <a ng-href="/news/{{item.id}}">
          <figure>
            <img ng-src="{{item.imageUrl}}">
            <figcaption am-time-ago="item.date | amParse:'DD/MM/YYYY h:mm:ss a'"></figcaption>
          </figure>

          <div class="cd-news-info">{{item.title}}<span>{{item.info}}</span></div>
        </a>
      </li>

      <span ng-if="results.length == 0">No hay resultados...</span>

    </ul>

  </div>
</section>



 

Finally and this is not an error lol, I want you to help me implement in my code to show them the infinite-scroll-disabled = 'busy' that they implement in this demo , it is for when the articles are loading the text "Loading ..." appears.