title: Can I force an element to display its hover effect?
body: <p>I am creating a table pagination directive in angularjs and I am using bootstrap buttons to display the page numbers.  Since I am making this directive for work and to possibly be used with multiple apps I am making it customizable.  So, all of the classes on my buttons are bound to variables on my scope (basically allowing the user to define their own class for each button). My problem is that since they can define the classes for the buttons, I can't set a concrete color for the class of the page number they are currently on.  So, if they click on page 3, for example, I want page three to change so they know which page they are on.  The colors which are used when you hover over each bootstrap button would work perfectly, but are only applied when you hover over them.  Is there a way to force the current page number to display the hover properties of which bootstrap class the user chose?  </p>
  
  <p>Here is where I would like to use ng-class to apply the hover class (in the paginatedTable.html):</p>
  
  <pre><code>&lt;button title="Page {{pageNumber}}" type="button" class="{{cndBtnNumbersClass}}" ng-repeat="pageNumber in cndPageNumbers"
          ng-click="cndTablePaginationNav(pageNumber)"&gt;{{pageNumber}}&lt;/button&gt;
  </code></pre>
  
  <p>Here is a working plnkr.  If you click on one of the page numbers it does apply the style while it is focused, but as soon as you click off it doesn't show which page number is chosen anymore.</p>
  
  <p><a href="http://plnkr.co/edit/CHO6HbT4emM3VEwcNnzq?p=preview" rel="nofollow">http://plnkr.co/edit/CHO6HbT4emM3VEwcNnzq?p=preview</a></p>
  
  <p>Thank you in advance for any help!</p>