title: Override the default pagination template of ui-bootstrap
body: <p>I am using AngularJS to show pagination. I made some changes on the default pagination template. This is my HTML:</p>
  
  <pre><code>&lt;ul uib-pagination ng-model="source_pagination.current" template-url="pagination.html" total-items="source_pagination.total_pages" items-per-page="1" max-size="source_pagination.max_items" class="pagination-sm" force-ellipses="true" direction-links="false" ng-change="source_page_changed()"&gt;&lt;/ul&gt;
  ...
         &lt;script id="pagination.html" type="text/ng-template"&gt;
              &lt;ul class="pagination"&gt;
                  &lt;li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}"&gt;
                      &lt;a href ng-click="selectPage(1)" title="First Page"&gt;
                          &lt;span class="glyphicon glyphicon-fast-backward"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li ng-if="directionLinks" ng-class="{disabled: noPrevious()}"&gt;
                      &lt;a href ng-click="selectPage(page - 1)" title="Previous Page"&gt;
                          &lt;span class="glyphicon glyphicon-step-backward"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li ng-repeat="page in pages track by $index" ng-class="{active: page.active}"&gt;
                      &lt;a href ng-click="selectPage(page.number)" ng-class="{highlight: ShouldHighlightPage(page.number)}"&gt;
                          {{page.text}}
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li ng-if="directionLinks" ng-class="{disabled: noNext()}"&gt;&lt;a href ng-click="selectPage(page + 1)" title="Next Page"&gt;&lt;span class="glyphicon glyphicon-step-forward"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li ng-if="boundaryLinks" ng-class="{disabled: noNext()}"&gt;&lt;a href ng-click="$scope.changePage('last')" title="Last Page"&gt;&lt;span class="glyphicon glyphicon-fast-forward"&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/script&gt;
  </code></pre>
  
  <p>I modified this section:</p>
  
  <pre><code>&lt;li ng-repeat="page in pages track by $index" ng-class="{active: page.active}"&gt;
      &lt;a href ng-click="selectPage(page.number)" ng-class="{highlight: ShouldHighlightPage(page.number)}"&gt;
                              {{page.text}}
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>And added this class-condition <code>{highlight: ShouldHighlightPage(page.number)}</code>. This code should call the function <code>ShouldHighlightPage(pageNum)</code> which is located in the controller:</p>
  
  <pre><code>$scope.ShouldHighlightPage = function (pageNum)
  {
      return true;
  }
  </code></pre>
  
  <p>So all the pages should contain the class <code>highlight</code>. But this function is never called (checked by adding a breakpoint in the function). All the pages presented without the <code>highlight</code> class.</p>
  
  <p>What am I doing wrong? </p>
  
  <p>Thank you.</p>