Jhipster Filter only works on the data on the page, not the entire database
<p>I need to add a filter to a Jhipster generated website. The entity name is called "person", which has rec_no, firstName, lastName, gender and Dob. I have around 2000 records in the database. I added the filter in the person.html file, by adding:</p>

<pre><code>&lt;input type="text" placeholder="Rec No" ng-model="search.rec_no"&gt;
                  &lt;input type="text" placeholder="First Name" ng-model="vm.searchFirstName"&gt;
                    &lt;input type="text" placeholder="Last Name" ng-model="search.lastname"&gt;
                    &lt;input type="text" placeholder="Gender" ng-model="search.sex"&gt;
                    &lt;input type="text" placeholder="Dob" ng-model="search.dob"&gt;
</code></pre>

<p>And,</p>

<pre><code> &lt;tr ng-repeat="person in vm.people | filter:search track by person.id"&gt;
</code></pre>

<p>It works great, but the only problem is this filter only works for the data on the first page (or whatever page I am currently on). It won't search the entire database. I have never done anything in AngurlaJS or Jhipster, so I have totally no cure how to fix it. I guess I need to override the defualt pagination. I did a lot research online, but can't find any help. I hope anyone can help me out of this. Thank you. </p>

<p>Here is the full code, </p>

<pre><code>&lt;div&gt;
&lt;h2 translate="archerApp.person.home.title"&gt;People&lt;/h2&gt;
&lt;jhi-alert&gt;&lt;/jhi-alert&gt;
&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-xs-4 no-padding-left"&gt;
            &lt;button class="btn btn-primary" ui-sref="person.new" &gt;
                &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
                &lt;span class="hidden-xs"  translate="archerApp.person.home.createLabel"&gt;
                    Create new Person
                &lt;/span&gt;
            &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-8 no-padding-right"&gt;
            &lt;form name="searchForm" class="form-inline"&gt;
                &lt;div class="input-group pull-right" &gt;
                    &lt;input type="text" class="form-control" ng-model="vm.searchQuery" id="searchQuery" placeholder="{{ 'archerApp.person.home.search' | translate }}"&gt;
                    &lt;span  class="input-group-btn width-min" &gt;
                        &lt;button class="btn btn-info" ng-click="vm.search(vm.searchQuery)"&gt;
                            &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                    &lt;/span&gt;
                    &lt;span class="input-group-btn width-min" ng-if="vm.currentSearch"&gt;
                        &lt;button class="btn btn-info" ng-click="vm.clear()"&gt;
                            &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;br/&gt;
&lt;div class="table-responsive"&gt;
    &lt;table class="jh-table table table-striped"&gt;
        &lt;thead&gt;
            &lt;tr jh-sort="vm.predicate" ascending="vm.reverse" callback="vm.transition()"&gt;
                &lt;th jh-sort-by="rec_no"&gt;&lt;span translate="archerApp.person.rec_no"&gt;Rec No&lt;/span&gt; &lt;span class="glyphicon glyphicon-sort"&gt;&lt;/span&gt;&lt;/th&gt;
                &lt;th jh-sort-by="firstname"&gt;&lt;span translate="archerApp.person.firstname"&gt;Firstname&lt;/span&gt; &lt;span class="glyphicon glyphicon-sort"&gt;&lt;/span&gt;&lt;/th&gt;                     
                &lt;th jh-sort-by="maidenname"&gt;&lt;span translate="archerApp.person.maidenname"&gt;Maidenname&lt;/span&gt; &lt;span class="glyphicon glyphicon-sort"&gt;&lt;/span&gt;&lt;/th&gt;
                &lt;th jh-sort-by="lastname"&gt;&lt;span translate="archerApp.person.lastname"&gt;Lastname&lt;/span&gt; &lt;span class="glyphicon glyphicon-sort"&gt;&lt;/span&gt;&lt;/th&gt;
                &lt;th jh-sort-by="sex"&gt;&lt;span translate="archerApp.person.sex"&gt;Sex&lt;/span&gt; &lt;span class="glyphicon glyphicon-sort"&gt;&lt;/span&gt;&lt;/th&gt;
                &lt;th jh-sort-by="dob"&gt;&lt;span translate="archerApp.person.dob"&gt;Dob&lt;/span&gt; &lt;span class="glyphicon glyphicon-sort"&gt;&lt;/span&gt;&lt;/th&gt;                    
                &lt;th&gt;&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                  &lt;input type="text" placeholder="Rec No" ng-model="search.rec_no"&gt;
                  &lt;input type="text" placeholder="First Name" ng-model="vm.searchFirstName"&gt;
                    &lt;input type="text" placeholder="Last Name" ng-model="search.lastname"&gt;
                    &lt;input type="text" placeholder="Gender" ng-model="search.sex"&gt;
                    &lt;input type="text" placeholder="Dob" ng-model="search.dob"&gt;
            &lt;/tr&gt; 
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr ng-repeat="person in vm.people | filter:search track by person.id"&gt;                    
                &lt;td&gt;{{person.rec_no}}&lt;/td&gt;
                &lt;td&gt;&lt;a ui-sref="person-detail({id:person.id})"&gt;{{person.firstname}}&lt;/a&gt;&lt;/td&gt;                    
                &lt;td&gt;{{person.maidenname}}&lt;/td&gt;
                &lt;td&gt;{{person.lastname}}&lt;/td&gt;
                &lt;td translate="{{'archerApp.Gender.' + person.sex}}"&gt;{{person.sex}}&lt;/td&gt;
                    &lt;td&gt;{{person.dob | date:'mediumDate'}}&lt;/td&gt;                    
                &lt;td class="text-right"&gt;
                    &lt;div class="btn-group flex-btn-group-container"&gt;
                        &lt;button type="submit"
                                ui-sref="person-detail({id:person.id})"
                                class="btn btn-info btn-sm"&gt;
                            &lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt;
                            &lt;span class="hidden-xs hidden-sm" translate="entity.action.view"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                        &lt;button type="submit"
                                ui-sref="person.edit({id:person.id})"
                                class="btn btn-primary btn-sm"&gt;
                            &lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;
                            &lt;span class="hidden-xs hidden-sm" translate="entity.action.edit"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                        &lt;button type="submit"
                                ui-sref="person.delete({id:person.id})"
                                class="btn btn-danger btn-sm"&gt;
                            &lt;span class="glyphicon glyphicon-remove-circle"&gt;&lt;/span&gt;
                            &lt;span class="hidden-xs hidden-sm" translate="entity.action.delete"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                    &lt;/div&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
&lt;div class="text-center"&gt;
    &lt;jhi-item-count page="vm.page" total="vm.queryCount" items-per-page="vm.itemsPerPage"&gt;&lt;/jhi-item-count&gt;
    &lt;uib-pagination class="pagination-sm" total-items="vm.totalItems" ng-model="vm.page" ng-change="vm.transition()"&gt;&lt;/uib-pagination&gt;
&lt;/div&gt;
</code></pre>

<p></p>