AngularJS keep adding item in a scope - angularjs

Question

I made a dummy data for my application using this method in my controller:
$scope.owners = [];
for (var i = 1; i <= 14; i++) {
$scope.owners.push({
id: i,
systemCode: '00' + (1284538+i),
systemName: 'Desktop',
description: 'Lorem ipsum dolor',
operational: '2973238',
business: '5621253',
manager: 'Dr. Smith',
status: 'Active'
});
}
and adding this function to perform delete request:
$scope.rowDelete = function(row){
$scope.owners.splice((this.owner.id - 1), 1);
}
and a page filter to use for pagination:
MyApp.filter('page', function () {
return function (list, page, size) {
var start = 0, end = 0;
//console.log('page filter...', page, size);
page = page || 1;
if (angular.isArray(list)) {
end = list.length;
if (page && Number(page) && size && Number(size)) {
page = Number(page);
size = Number(size);
start = (page - 1) * size;
end = start + size;
}
return Array.prototype.slice.call(list, start, end);
}
return null;
}
});
In the HTML template, I'm using ng-repeat and the custom filter:
<tr data-ng-repeat="owner in owners | page:$stateParams.page:2">
<td class="table-cell-clean">
<i class="mg-icon-delete"></i>
</td>
<td>{{ owner.systemCode }}</td>
<td>{{ owner.systemName }}</td>
<td>{{ owner.description }}</td>
<td>{{ owner.operational }}</td>
<td>{{ owner.business }}</td>
<td>{{ owner.manager }}</td>
<td class="align-center">{{ owner.status }}</td>
Whenever I click the delete button, rowDelete() is called as expected, the row is deleted, but as soon as it's leaving the DOM, a new item from the next page is inserted into the current table.
What might go wrong?

Answer 1

That would be as expected. Your owners array is being modified which requires the ng-repeat expression to be re-evaluated which includes the page filter expression as apart of it. So owners is modified by deleting a row, ng-repeat detects the change and re-evaluates the repeat expression which before it can iterate over the array it runs owners through the page filter. So n items per page, delete leaves n-1, and page filters the owners array to return n items.
All normal behavior.