I'm new to angular-ui and playing with it. I'm trying to use the pagination directive (http://angular-ui.github.io/bootstrap/#/pagination), but it seems I'm missing some styles as I just see the unordered list rendered, rather than the expected pager UI. I included the following resources, in this order:
1) the latest (RC) bootstrap CSS: http://blog.netdna.com/opensource/bootstrapcdn/bootstrapcdn-now-serving-3-0-0-rc1/
2) angular JS: http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js
3) angular-ui/bootstrap: I include from https://github.com/angular-ui/bootstrap/tree/gh-pages the file ui-bootstrap-tpls-0.4.0.js
My HTML sample body:
<body ng-app="Test">
<div ng-controller="PaginationDemoCtrl" class="well well-small">
<pagination boundary-links="true" num-pages="noOfPages" current-page="currentPage" class="pagination-small" previous-text="'‹'" next-text="'›'" first-text="'«'" last-text="'»'"></pagination>
</div>
<script>
var PaginationDemoCtrl = function ($scope) {
$scope.noOfPages = 7;
$scope.currentPage = 4;
$scope.maxSize = 5;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
};
var app = angular.module("Test", ["ui.bootstrap"]);
</script>
</body>
It's not your fault. Turns out angular UI is not 100% compatible with bootstrap 3 just yet. Most things work, but you can see the status in this issue: Support bootstrap 3.0. I don't have the time to dive into this particular issue right now, but since all the styles are missing rather than some slightly broken thing, and all the functionality is fine, I bet it's an easy fix (renaming a class, etc). Meanwhile, you should either:
<pager> with new boostrap - I just tested it, and it works fine. So instead of <pagination> you want <pager>. A few fewer buttons but works for my purposes.For instance:
<pager num-pages="numPages()" current-page="currentPage"></pager>
Hope that helps!