title: AngularJS - ui-bootstrap pagination. Hide buttons on single page
body: <p>I am using ui-bootstrap pagination and I want to hide the pagination controls when all the results are contained on a single page. As you can see in the picture below there is only one page and the controls are still showing. It seems like it would be common sense for the ui-bootstrap team to include this natively in the framework. So I'm thinking that there might be a way to do this easily but I wouldn't know where to start.</p>
  
  <p><a href="https://i.stack.imgur.com/QAOCQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QAOCQ.jpg" alt="enter image description here"></a></p>
  
  <p>Here is the code in the controller:</p>
  
  <pre><code>$scope.itemsPerPage = 5;
  $scope.currentPage = 1;
  $scope.maxSize = 4;
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div ng-controller="observedCars"&gt;
    &lt;div ng-repeat="obv in observed['Observed CARs'] | startFrom:(currentPage - 1) * itemsPerPage | limitTo: itemsPerPage"&gt;
      &lt;div class="carId"&gt;{{ obv['Display Name'] }}&lt;/div&gt;
    &lt;/div&gt;
    &lt;ul uib-pagination total-items="observed['Observed CARs'].length" ng-model="currentPage" items-per-page="itemsPerPage" ng-change="pageChanged()" max-size="maxSize"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm hoping that someone has already done this same thing and can help.</p>
  
  <p>Thanks in advance.</p>