ngTableParams la Pagination avec $http.obtenez de l'

De travail sur un projet AngularJS et j'ai couru dans le problème suivant:

Lors de l'utilisation stockés localement /codé en dur de données, la pagination fonctionne très bien.
Lors de l'utilisation de données stockées à distance, la pagination ne fonctionne pas correctement.

J'ai cherché un peu, mais ne pouvais pas trouver la solution à mon problème, voici le code snippits:

Le code HTML:

<div ng-controller="ngTableCtrl">
<p><strong>Pagina:</strong> {{tableParams.page()}}</p>
<p><strong>Aantal weergegeven:</strong> {{tableParams.count()}}</p>
<table ng-table="tableParams" class="table table-striped" template-pagination="custom/pager">
<tr ng-repeat="x in names">
<td data-title="'Name'">{{x.Name}}</td>
<td data-title="'City'">{{x.City}}</td>
<td data-title="'Country'">{{x.Country}}</td>
</tr>
</table>
<script type="text/ng-template" id="custom/pager">
<ul class="pager ng-cloak">
<li ng-repeat="page in pages"
ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}"
ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">
<a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo; Previous</a>
<a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next &raquo;</a>
</li>
<li>
<div class="btn-group">
<button type="button" ng-class="{'active':params.count() == 2}" ng-click="params.count(2)" class="btn btn-default">2</button>
<button type="button" ng-class="{'active':params.count() == 5}" ng-click="params.count(5)" class="btn btn-default">5</button>
<button type="button" ng-class="{'active':params.count() == 10}" ng-click="params.count(10)" class="btn btn-default">10</button>
<button type="button" ng-class="{'active':params.count() == 15}" ng-click="params.count(15)" class="btn btn-default">15</button>
</div>
</li>
</ul>
</script>
</div>

Le JS:

app.controller('ngTableCtrl2', function ($scope, $http, $filter, ngTableParams) {
$http.get('http://www.w3schools.com/angular/customers.php')
.success(function (response) {$scope.names = response.records;});
$scope.tableParams = new ngTableParams({
page: 1, //show first page
count: 5, //count per page
sorting: {
name: 'asc' //initial sorting
}
}, {
total: data.length, //length of data
getData: function ($defer, params) {
//use build-in angular filter
var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});

La page web ( version live: http://178.62.232.175:8080/STANDARD/#/app/table/data ) montre tous les résultats de la première table (à distance, à partir de $http.get), tandis que le deuxième tableau, montre que le sous-ensemble des résultats?! (2, 5, 10, 15)
Le code est identique, à l'exception:

<tr ng-repeat="x in names">

utilisée pour l'affichage de données à distance et est remplacé par:

<tr ng-repeat="x in $data">

pour afficher les données brutes en tant que tel:

var data = [{
Name: "Alfreds Futterkiste", City: "Berlin", Country: "Germany"},{
Name: "Ana Trujillo Emparedados", City: "México D.F.", Country: "Mexico"},{
Name: "Antonio Moreno Taquería", City: "México D.F.", Country: "Mexico"},{
Name: "Around the Horn", City: "London", Country: "UK"},{
Name: "B's Beverages", City: "London", Country: "UK"},{
Name: "Berglunds snabbköp", City: "Luleå", Country: "Sweden"},{
Name: "Blauer See Delikatessen", City: "Mannheim", Country: "Germany"},{
Name: "Blondel père et fils", City: "Strasbourg", Country: "France"},{
Name: "Bólido Comidas preparadas", City: "Madrid", Country: "Spain"},{
Name: "Bon app", City: "Marseille", Country: "France"},{
Name: "Bottom-Dollar Marketse", City: "Tsawassen", Country: "Canada"},{
Name: "Cactus Comidas para llevar", City: "Buenos Aires", Country: "Argentina"}
];

La pagination de la deuxième table fonctionne comme il se doit. Que dois-je modifier pour le faire fonctionner avec des données à distance?