This is way, I solved it:
directive:
<table ng-repeat='t in getIndexes(tableCount) track by $index'>
<tbody>
<tr ng-repeat='item in items' ng-if='isVisible($parent.$index,$index)'>
<td>{{item.name}}</td>
<td>{{item.city}}</td>
</tr>
</tbody>
</table>
getIndexes - function, which just creates array, because ng-repeat cannot just do simple repeat,only smart one.
isVisible - function, which defines visibility of the appropriate tr, based on position in source array.
directive code:
app.directive("tconstructor", function () {
'use strict';
return {
restrict: 'AE',
templateUrl: 'directive.html',
scope: {
items: '=',
perTable: '=' // items per table
},
link: function ($scope, $element, attrs) {
$scope.tableCount = $scope.items.length / $scope.perTable;
$scope.getIndexes = function(count) {
return new Array(count);
},
$scope.isVisible = function(t,i) {
console.log(t,i,(t*$scope.perTable <= i), (i < (t+1)*$scope.perTable) );
return (t*$scope.perTable <= i) && (i < (t+1)*$scope.perTable);
}
}
};
});
index page:
<div ng-controller="SimpleController">
<tconstructor items='items' per-Table='perTable'></tconstructor>
</div>
live code: I have set, items array to 8 elements, and per Table count = 2, as result 4 tables with 2 elems in each.
http://plnkr.co/edit/eUM7UJap3VIYvi0dMMbc?p=preview
there should be no issues, to adjust code and reach your goals. hope that helps