Angular-ui/bootstrap: pagination not rendered (missing styles?)

I was able to fix styling by following quick source code change:

in your ui-bootstrap file (mine was named ui-bootstrap-tpls-0.6.0.min.js) find following text:

<div class="pagination"><ul>

and then add class="pagination" to <ul> so it looks like this

<div class="pagination"><ul class="pagination">

I had an issue with pagination when I updated my angular-bootstrap version. It seems that they have changed the way we should use the directive.

before

<uib-pagination
    total-items="pagination.total_entries"
    ng-model="pagination.current_page"
    ng-change="pageChanged()">
</uib-pagination>

after

<ul uib-pagination
    total-items="pagination.total_entries"
    ng-model="pagination.current_page"
    ng-change="pageChanged()">
</ul>

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:

  1. Switch to old boostrap
  2. Write it yourself
  3. Use the <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!