How do I use ui-sref-active with bootstrap navbar-brand?

Question

In this sample: Angularjs navigation menu with UI-Bootstrap tabs and UI-Router

The following works great for the list items on the navbar and highlights them as I click:

 <ul>
   <li ui-sref-active="active" class="item">
     <a href ui-sref="route1">route1</a>
   </li>
 </ul>

But when I use the standard boostrap navbar-brand I can't make this work:

 <nav class="navbar navbar-fixed-top">
    <div class="container-fluid">
        <div ui-sref-active="active" class="navbar-header">
            <a href class="navbar-brand" ui-sref="state1">State1</a>
        </div>
        <ul class="nav navbar-nav">
            <li ui-sref-active="active" class="item">
                <a href ui-sref="state2">State2</a>
            </li>
            <li ui-sref-active="active" class="item">
                <a href ui-sref="state3">State3</a>
            </li>
        </ul>
        <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
    </div>
 </nav>

Have tried just about everything, but can't find this specific combination of technologies and the navbar-brand. Any help would be appreciated.

What doesn't work? What is the undesired behaviour? – devqon May 27 '15 at 07:42 — devqon, May 27 '15 at 07:42
The navbar-brand on the far left doesn't highlight. – stalagluft May 27 '15 at 08:07 — stalagluft, May 27 '15 at 08:07
Please include a jsfiddle or something similar – devqon May 27 '15 at 08:09 — devqon, May 27 '15 at 08:09

How do I use ui-sref-active with bootstrap navbar-brand?

0 Answers0