title: ngtable external data sort, filter and paging not working
body: <p>I'm trying to use ngTable in my spring MVC/Angularjs Web application (with eclipse).
  Everything seems to work fine :</p>
  
  <ul>
  <li>retrieve external data from my @RestController in JSON format in my javascript file</li>
  <li>displaying the table with all rows (with jsp view)</li>
  <li>displaying sorting, filtering and pagination stuff (with jsp view)</li>
  </ul>
  
  <p>But all rows are displayed in the first page (and not only the first 10) and when I click on table headers to sort or typing in the filter fields, nothing happens.</p>
  
  <p>I followed this ngTable <a href="http://ng-table.com/#/loading/demo-external-array" rel="nofollow noreferrer">example</a> but it's not working fine.</p>
  
  <p>Hope you can help me. And please be lenient, it's my first post. </p>
  
  <p>Here's my code :</p>
  
  <p><strong>JS :</strong></p>
  
  <pre><code>var app = angular.module('app',["ngTable", "ngResource"]);
  
  (function() {
  
  app.controller ('ListeExec', ListeExec);
  ListeExec.$inject = ["NgTableParams", "$resource"];
  
  function ListeExec(NgTableParams, $resource) {
  
      //debugger;
  
      var svc = $resource("executions/all");
  
      this.ExecTable = new NgTableParams({
            count: 10, // count per page
            sorting: { date_nj6_str : 'desc' }
        },{   getData: function (params) {
                  return svc.query().$promise.then(function (data) {
                      params.total(data.length); // recal. page nav controls
                      return data;
                  });
              }
      });
  
  }
  })();
  </code></pre>
  
  <p><strong>JSP :</strong></p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Liste des exécutions NJ6&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.7.0/angular-resource.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="js/Executions_angular.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
      integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
      crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet"; href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="container" ng-app="app" ng-controller="ListeExec as lex"&gt;
  
          &lt;h1&gt;Liste des éditions de bulletins de paie NJ6&lt;/h1&gt;
  
          &lt;div id="listexecutions" class="table-responsive-xl"&gt;
  
              &lt;table ng-table="lex.ExecTable" class="table table-bordered table-hover table-striped" show-filter="true"&gt;
                  &lt;tr ng-repeat="exc in $data track by exc.nupro"&gt;
                      &lt;td data-title="'#'"&gt;{{ $index + 1 }}&lt;/td&gt;
                      &lt;td data-title="'Nupro'" filter="{nupro: 'text'}" sortable="'nupro'"&gt;&lt;a ng-href="DetailExec?nupro={{ exc.nupro }}"&gt;{{ exc.nupro }}&lt;/a&gt;&lt;/td&gt;
                      &lt;td data-title="'Nudoss ZO'" sortable="'nudoss_zo'"&gt;{{ exc.nudoss_zo }}&lt;/td&gt;
                      &lt;td data-title="'Date NJ6'" filter="{date_nj6_str: 'text'}" sortable="'date_nj6_str'"&gt;{{ exc.date_nj6_str }}&lt;/td&gt;
                      &lt;td data-title="'Société'" filter="{code_societe: 'text'}" sortable="'code_societe'"&gt;{{ exc.code_societe }}&lt;/td&gt;
                      &lt;td data-title="'Utilisateur'" filter="{code_user: 'text'}" sortable="'code_user'"&gt;{{ exc.code_user }}&lt;/td&gt;
                      &lt;td data-title="'Nombre de bulletins'" filter="{ nbre_bull: 'number'}" sortable="'nbre_bull'"&gt;{{ exc.nbre_bull }}&lt;/td&gt;
                      &lt;td data-title="'Dispatch'"&gt;&lt;img style="width:30%; height:auto;" ng-src="{{exc.temoin_dispatch &amp;&amp; 'img/ok-icon.png' || 'img/close-icon.png'}}"&gt;&lt;/td&gt;
                      &lt;td data-title="'Envoi Docapost'"&gt;&lt;img style="width:30%; height:auto;" ng-src="{{exc.temoin_envoi &amp;&amp; 'img/ok-icon.png' || 'img/close-icon.png'}}"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the result in the browser :
  <img src="https://i.stack.imgur.com/S5Ti5.png" alt="browser view"></p>