I realize when having a lot of pages, the pagination repeater became too long and sometimes wrap in the container.
The following code allows you to have ellipses (...) in between (similar to 500px's pagination, see http://500px.com/photos)
<li ng-repeat="n in range(pagedItems.length)" ng-class="{active: n == currentPage}">
<a ng-bind="n + 1" ng-show="n >= 0" ng-click="setPage(n)">1</a>
<span ng-show="n < 0">...</span>
</li>
$scope.range = function(start, end) {
var ret = [],
i;
if (!end) {
end = start;
start = 0;
}
for (i = start; i < end; i++) {
ret.push(i);
}
var paging = ret;
if (ret.length > 6) {
var currentPage = $scope.currentPage;
paging = ret.slice(0, 1);
if (currentPage === 0) {
//shows 1, 2, 3 ... 8, 9, 10
paging = paging.concat(ret.slice(1, 3));
paging.push(-1);
paging = paging.concat(ret.slice(ret.length - 3, ret.length));
} else if (currentPage < 4) {
//shows 1, 2, 3, 4, 5 ... 10
paging = paging.concat(ret.slice(1, 5));
paging.push(-1);
paging = paging.concat(ret.slice(ret.length - 1, ret.length));
} else if (currentPage >= ret.length - 4) {
//shows 1 ... 6, 7, 8, 9, 10
paging.push(-1);
paging = paging.concat(ret.slice(ret.length - 5, ret.length));
} else {
//shows 1 ... 4, 5, 6 ... 10 for example
paging.push(-1);
paging = paging.concat(ret.slice(currentPage - 1, currentPage + 2));
paging.push(-1);
paging = paging.concat(ret.slice(ret.length - 1, ret.length));
}
}
return paging;
};