如何在bootstrap navbar-brand中使用ui-sref-active？

Question

在此示例中：Angularjs navigation menu with UI-Bootstrap tabs and UI-Router

以下内容适用于导航栏上的列表项，并在我点击时突出显示：

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

但是当我使用标准的boostrap navbar-brand时，我无法做到这一点：

 <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>

几乎尝试过所有事情，但无法找到这种技术和导航栏品牌的特定组合。任何帮助将不胜感激。