title: How can I apply styling to active/hover states within ng-repeat
body: <p>I have been at this for a day or so now and just can't figure out what needs to happen. </p>
  
  <p>I am using ng-repeat to generate a tabbed list of links that is displayed in a simple nav bar. This nav bar is related to a workspace. There are many workspaces that have a color assigned to them by the owner, accessed by <code>{{ workspace.color }}</code>. </p>
  
  <p>What I would like to do is style the <code>:hover</code> and <code>:active</code> states of the <code>&lt;li&gt;</code> items such that the background color matches the workspace's assigned color.</p>
  
  <pre><code>  &lt;ul class="nav  nav-pills nav-justified" 
        style="border:2px solid {{workspace.color}}" &gt;
    &lt;li ng-repeat="page in pages" ng-class="{active:page.uri == uri,'last':$last}" 
      ng-style="{'border-right':'2px solid {{ workspace.color }}'}"&gt;
  </code></pre>
  
  <p>Any idea how to accomplish this? I've done a bunch of digging and I can't seem to find anything mentioning setting style for psuedo classes within ng-class or ng-style.</p>
  
  <p>Obviously I have access to the <code>.active</code> class, however the background needs to change based on the project being displayed so I can't hardcode a value in a style sheet.</p>
  
  <p>Thanks in advance for any help.</p>