这是一个简单的解决方案

<ul class="nav navbar-nav navbar-right navbar-default menu">
  <li ng-class="menuIndice == 1 ? 'active':''">
    <a ng-click="menuIndice = 1" href="#/item1">item1</a>
  </li>
  <li ng-class="menuIndice == 2 ? 'active':''">
    <a ng-click="menuIndice = 2" href="#/item2">item2</a>
  </li>
  <li ng-class="menuIndice == 3 ? 'active':''">
    <a ng-click="menuIndice = 3" href="#/item3">item3</a>
  </li>
</ul>

使用对象作为切换变量。 你可以很简单地用以下方法做到这一点:

<ul class="nav navbar-nav">
   <li ng-class="{'active':switch.linkOne}" ng-click="switch = {linkOne: true}"><a href="/">Link One</a></li>
   <li ng-class="{'active':switch.linkTwo}" ng-click="switch = {link-two: true}"><a href="/link-two">Link Two</a></li>
</ul>

每次单击链接，switch对象都会被一个新对象替换，其中只有正确的switch对象属性为true。未定义的属性将被赋值为false，因此依赖于它们的元素将不会被赋值为活动类。

结合@Olivier的AngularStrap回答，我也实现了kevinknelson的回答:https://github.com/twbs/bootstrap/issues/9013。

Bootstrap3导航栏本来就不是为单页面(比如Angular)应用设计的，因此当菜单在小屏幕上时，点击时不会崩溃。

你可以在角表达式中使用条件来实现这一点，例如:

<a href="#" class="{{ condition ? 'active' : '' }}">link</a>

话虽如此，我确实发现angular指令是更“合适”的方式，即使外包大量这种微型逻辑会在一定程度上污染你的代码库。

在开发过程中，我每隔一段时间就会使用条件来进行GUI样式化，因为这比创建指令要快一些。但我无法告诉你一个实例，它们实际上在代码库中保留了很长时间。最后，我要么把它变成一个指令，要么找到一个更好的方法来解决问题。

只是您必须添加所需的活动类所需的颜色代码。

例：ng-class="{' active': currentnavselected}"ng-click = "setnav"

JavaScript

/**
 * Main AngularJS Web Application
 */

var app = angular.module('yourWebApp', [
    'ngRoute'
]);


/**
 * Setup Main Menu
 */

app.controller('MainNavCtrl', [ '$scope', '$location', function ( $scope, $location) {
    $scope.menuItems = [
        {
            name: 'Home',
            url:  '/home',
            title: 'Welcome to our Website'
        },
        {
            name: 'ABOUT',
            url:  '/about',
            title: 'Know about our work culture'
        },
        {
            name:   'CONTACT',
            url:    '/contact',
            title:  'Get in touch with us'
        }
    ];

    $scope.isActive = function (viewLocation) {
        return viewLocation === $location.path();
    };
}]);

HTML

  <div class="navbar-collapse collapse" ng-controller="MainNavCtrl">
    <ul id="add-magic-line" class="nav navbar-nav navbar-right">
      <li data-ng-class="{current_page_item: isActive('{{ menuItem.url }}')}" data-ng-repeat="menuItem in menuItems">
        <a data-ng-href="#{{menuItem.url}}" title="{{menuItem.title}}">
          {{menuItem.name}}
        </a>
      </li>
    </ul>
  </div>