title: Search Box filter in Pagination with AngularJs
body: <p>I have created a photo album and a uib-pagination and now I want to add a search box. My pagination consists of 5 pages. The filter that I have used just search the photos which are in that current page.for example if I go to page 10 and want to search a picture which is in page 1 is not working.but it searches and shows me the pictures that are in page 10.
  I am wondering which filter should I use to give me the possibility of searching pictures of all pages.</p>
  
  <p>js codes:</p>
  
  <pre><code>paintApp.controller('intController', ['$scope','$location','$log', function($scope,$location, $log){
  
      this.images = [];
  
      for(i = 1 ; i &lt;51 ; i++){
          this.images.push(i);    
      }
  
      this.currentPage = 1 ; 
      this.numPerPage = 9 ; 
      this.maxSize = 6;
  
      this.pageChanged = function() {
          $location.path( "int/"+this.currentPage , false);
  
      };
  }]);
  
      paintApp.filter('imgThumb', function(){
          return function(images, start){
              return images.slice(start);
          }
      });
  </code></pre>
  
  <p>HTML codes:</p>
  
  <pre><code>&lt;div  ng-controller="intController as intCtrl "&gt;   
      &lt;div class="container"&gt;
          &lt;uib-pagination 
            ng-model="intCtrl.currentPage"
            total-items="intCtrl.images.length"
            max-size="intCtrl.maxSize"  
            ng-click="intCtrl.pageChanged()"
            &gt;
  
          &lt;/uib-pagination&gt;
  
          &lt;div class="row"&gt;
                &lt;div class="col-lg-3"&gt;
                  &lt;div class="input-group"&gt;
                    &lt;input type="text" class="form-control" placeholder="Search for..." name="mySearch" ng-model="search"  &gt;
                    &lt;span class="input-group-btn"&gt;
                      &lt;button class="btn btn-default" type="button" &gt;Go!&lt;/button&gt;
  
                  &lt;/div&gt;&lt;!-- /input-group --&gt;
                &lt;/div&gt;&lt;!-- /.col-lg-6 --&gt;
          &lt;/div&gt;&lt;!-- /.row --&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;div class="row"&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 uib-pagination"  ng-repeat="img in intCtrl.images | imgThumb:(intCtrl.currentPage -1 )* intCtrl.numPerPage| limitTo:intCtrl.numPerPage | filter: search "&gt;
  
  
  
              &lt;div class="thumbnail "&gt;
                  &lt;img  src="src/images/sample{{img}}.jpg" &gt;  
              &lt;div class = "caption"  &gt;
                  &lt;h3&gt;{{img}} &lt;/h3&gt;
                   &lt;p&gt;
                       &lt;a href = "#" class = "btn btn-primary" role = "button"&gt;
                         Button
                       &lt;/a&gt; 
                       &lt;a href = "#" class = "btn btn-default" role = "button"&gt;
                         Button
                       &lt;/a&gt;
                   &lt;/p&gt;
              &lt;/div&gt;
              &lt;/div&gt;              
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>