How to change Text and Styles in Bootstrap UI Paging with AgnularJS?

Question

I dont get how to change styles and default text here. Here`s html:

 <pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages" items-per-page="itemsPerPage"></pagination>

Here`s JS:

  $scope.totalItems = $scope.data.length;
  $scope.totalItems = $scope.data.length;
  $scope.currentPage = 4;
  $scope.itemsPerPage = $scope.viewby;
  $scope.maxSize = 5;

Answer 1

For changing the color you can use the CSS.

CSS:

ul.pagination li > a { color: red !important; }

For changing the text you can use the attributes of UI-Bootstrap.

HTML:

<pagination first-text="Hello" previous-text="World" next-text="Good" 
 last-text="Day!"  total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages" items-per-page="itemsPerPage"></pagination>

Plunkr Demo

Answer 2

hi i thinks it healp full your text chnage

<script id="template/pagination/pagination.html" type="text/ng-template">
    <ul class="pagination">
        <li ng-repeat="page in pages" ng-class="{active: page.active}">
            <a href data-ng-show="page.text  == 'Previous'" ng-click="selectPage(page.number)"> <i class="fa fa-chevron-left"></i> </a>
            <a href data-ng-show="page.text >= 1 || page.text == 'First' || page.text == 'Last'" ng-click="selectPage(page.number)">{{page.text}}</a>
            <a href data-ng-show="page.text == 'Next'" ng-click="selectPage(page.number)"> <i class="fa fa-chevron-right"></i> </a>
        </li>
    </ul>