AngularJS - ui-bootstrap pagination “show more results” not working

Question

I cant seem to get my select drop down "show more results" to work with ui-bootstrap. I got it working with dir-pagination but not bootstrap. What I simply need it to do is when they select 10 from the dropdown I want it to display ten results. Simple right? Not for me apparently. :()

Here is my HTML:

// Show more results
<select ng-model="pageSize" id="pageSize" class="form-control searchShowMore">
  <option ng-selected="true" value="5">5</option>
  <option value="10">10</option>
</select>

<div ng-repeat="res in details.Results | startFrom:(currentPage - 1) * pageSize | limitTo: pageSize" class="myCar">

  <div class="carId">{{ res['Display Name'] }}</div>
  <div class="title">{{ res['Project Title'] }}</div>
  <h4><u>Amount</u></h4>
  <div class="modified">${{ res.Amount | number: 2 }}</div>
</div>

<ul uib-pagination total-items="details.Results.length" ng-model="currentPage" items-per-page="pageSize"></ul>

Right now it just displays all the results unless I add $scope.pageSize = 5; in the controller. I figured that it would would work the same as dir-pagination but I'm obviously wrong. :)

One thing to point out also is that it only loads all the data at first. Once I click the dropdown and select 5 it changes the items per page to only show 5. It is just the initial load where it shows all the data. I think it has something to do with the select option that has ng-selected="true" value="5". Its not grabbing the initial value at the beginning

Anyone know if this is possible with ui-bootstraps pagination?

Answer 1

Do these things,

1. Remove startFrom and limitTo in the ng-repeat. uib-pagination will automatically see to it.
2. Set the select ng-model as ng-model="pageSize" and items-per-page="pageSize" for the uib-pagination
3. ng-model of uib-pagination is currentPage . Do not set it to pageSize .