从引导导航栏下拉菜单导航到角度页面模板

我第一次用angular构建一个web应用程序，并使用了bootstraps css（angular ui）。我正在使用导航栏从引导和路由到ng模板与ng路由。一切都很好。

现在我想在导航栏中包含一个下拉按钮，在那里我可以访问一些额外的链接进行路由。我是这样编的：

<nav class="navbar navbar-default navbar-static-top" role="navigation" ng-controller="NavigationCtrl">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-click="nav.collapsed=!nav.collapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse navbar-right" collapse="nav.collapsed">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#/index" ng-click="nav.collapsed=true">
                        <span class="glyphicon glyphicon-home"></span>
                        Home
                    </a>
                </li>
                <li class="dropdown">
                    <a href="" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-cog"></span>
                        Dropdown
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-toggle" data-toggle="dropdown" role="menu">
                        <li>
                            <a href="#/configA" ng-click="nav.collapsed=true">
                                <span class="glyphicon glyphicon-dashboard"></span>
                                ConfigA
                            </a>
                        </li>
                        <li>
                            <a href="#/configB" ng-click="nav.collapsed=true">
                                <span class="glyphicon glyphicon-dashboard"></span>
                                ConfigB
                            </a>
                        </li>
                        <li>
                            <a href="#/configC" ng-click="nav.collapsed=true">
                                <span class="glyphicon glyphicon-dashboard"></span>
                                ConfigC
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

我的路线是这样的：

app.config(["$routeProvider", function ($routeProvider) {
    $routeProvider
        // route for the main page
        .when("/index", {
            templateUrl: "/index"
        })
        // route for the about page
        .when("/configA", {
            templateUrl: "/configA"
        })
        // route for the about page
        .when("/configB", {
            templateUrl: "/configB"
        })
        // route for the about page
        .when("/configC", {
            templateUrl: "/configC"
        })
        .otherwise({redirectTo: "/index"});
}])

我的模板在html头中作为脚本，如：

<script type="text/ng-template" id="/index">
    <div>
        <div class="jumbotron">
            <h1>Hello, world!</h1>
            <p>...</p>
            <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
        </div>
    </div>
</script>

这适用于导航栏中的常见链接。但是点击下拉列表中的链接不起作用，只是什么都没发生：（我错过了什么吗？