dirpagination is working but not able to see controls - angularjs

Question

The dirpagination works because it gives 10 items per row but I am not able to see the controls at the bottom of table to navigate.
//Creating tabs and table
<div ng-controller="MyController" class="my-controller">
<div class="container">
<h2>Legislaotrs</h2>
<ul class="nav nav-tabs">
<li>By State</li>
<li>House</li>
<li>Senate</li></ul>
</div>
<form class="form-inline">
<div class="form-group">
<label >Search</label>
<input type="text" ng-model="search" class="form-control" placeholder="Search">
</div>
</form>
<table class="table table-striped table-hover">
<thead>
<tr>
 <th>Party</th>
<th>Name</th>
<th>Chamber</th>
<th>District</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|filter:search|itemsPerPage:10">
<td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{user.fullname}}</td>
<td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
<td>{{user.district_name}}</td>
<td>{{user.state_name}}</td>
<td> <button type="button" class="btn btn-primary">View Details</button></td>
</tr>
</tbody>
</table>
//setting pagination controls
<div id="paginate">
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true">
</dir-pagination-controls></div>
</div>

Answer 1

First you need to include the module in your project:
angular.module('myApp', ['angularUtils.directives.dirPagination']);
Then create the paginated content:
<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]>
</dir-pagination-controls>
here is working plunker