title: AngularJS - Search on the entire paginated table
body: <p>I'm trying to make the search field global on the entire paginated table, but currently it's just returning the rows that exists on the current selected page.</p>
  
  <p><strong>My JSP Page :</strong> </p>
  
  <pre><code>&lt;body ng-controller="JobController as control" class="skin-blue"&gt;
      &lt;!-- The field search --&gt;
      &lt;input type="text" class="form-control" placeholder="Chercher" ng-model="search"&gt;
  
      &lt;!-- The Table paginated --&gt;
      &lt;table id="jobstable" class="table table-bordered table-striped"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th style="width: 40px;"&gt;ID&lt;/th&gt;
                  &lt;th&gt;Job&lt;/th&gt;
  
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
  
              &lt;tr ng-repeat="doc in filteredJobs | filter:search"&gt;
                  &lt;td&gt;&lt;span&gt;{{doc.id_job}}&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;span ng-bind="doc.titre"&gt;&lt;/span&gt;&lt;/td&gt;
  
  
              &lt;/tr&gt;
  
          &lt;/tbody&gt;
  
      &lt;/table&gt;
      &lt;!-- Pagination --&gt;
      &lt;pagination ng-model="currentPage" 
                  total-items="control.jobs.length"
                  max-size="maxSize" 
                  boundary-links="true" &gt;
      &lt;/pagination&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>And here is my AngularJS Controller :</strong> </p>
  
  <pre><code>'use strict';
  
  App.controller(
                  'JobController',
                  [
                          '$scope',
                          'JobService',
                          function($scope, JobService) {
  
                              /**
                               * ******************** Pagination part
                               * *************************************
                               */
  
                              self.fetchAllJobs(); // All the records are retrieved
  
                              $scope.filteredJobs = [], $scope.currentPage = 1,
                              $scope.numPerPage = 10, $scope.maxSize = 5;
  
                              $scope.numPages = function() {
                                  return Math.ceil(self.jobs.length
                                          / $scope.numPerPage);
                              };
  
                              $scope.$watch('currentPage + numPerPage',function() {
                                                  var begin = (($scope.currentPage - 1) * $scope.numPerPage), 
                                                      end = begin + $scope.numPerPage;
  
                                                  $scope.filteredJobs = self.jobs.slice(begin, end);
                                              });
  
                          } ]);// End of controller
  </code></pre>