UI-Router change active router style
<p>I am using the minified version of UI-Router.  I have a couple of routes that I setup with UI-Router.  The links to these routes are nested inside of a Bootstrap navbar.  </p>

<pre><code>&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#navbar" aria-expanded="false"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;a class="navbar-brand" href="#"&gt;App Brand&lt;/a&gt;

        &lt;div class="collapse navbar-collapse" id="navbar"&gt;
            &lt;ul class="nav navbar-nav"&gt;
                &lt;li&gt;&lt;a ui-sref-active="active" ui-sref="route1"&gt;Route 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a ui-sref="route2" ui-sref-active="active"&gt;Route 2&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

<p>I'm using the UI-Router directives, <code>ui-sref-active</code> or <code>ui-sref-active-eq</code> to change the style of the active link.  I would like to be consistent and use one of these directives since I am using UI-Router for the routing itself.  I know how to change an element's class on click in the traditional Angular way.</p>

<p>I have a CSS class defined for the directive:</p>

<pre><code>.active {
   background-color: red;
}
</code></pre>

<p>This works to a certain extent, but has some weird behaviors.  When the page first loads, the default route is selected and the red background appears behind it.  When you hover over the highlighted element or click it, then the red background disappears. I have tried adding <code>.active:focus, .active:hover</code> as CSS classes, but that didn't work.  I have also tried changing the class name to see if that would do anything, but it didn't.  </p>

<p>This is probably useless, but I have the routes configured this way:</p>

<pre><code>(function() {
    angular
        .module('App)
        .config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
            $urlRouterProvider) {
                $urlRouterProvider.otherwise('/route1');

                $stateProvider
                    .state('route1', {
                        url: '/route1',
                        templateUrl: '../client/views/route1.html'
                    })
                    .state('route2', {
                        url: '/route2',
                        templateUrl: '../client/views/route2.html'
                    });
            }]);
})();
</code></pre>

<p>Why am I having these strange behaviors?</p>

<p>EDIT:</p>

<p>I created a Plunk: <a href="http://plnkr.co/edit/YLBnxHKTzjPdTNFFZB52?p=preview" rel="nofollow">http://plnkr.co/edit/YLBnxHKTzjPdTNFFZB52?p=preview</a></p>