Twitter Bootstrap Navbar with AngularJS – Collapse Not Functioning

For those interested – Here is another way of implementing this without Bootstrap’s javascript.

Import Angular’s UI-Bootstrap.

HTML:

<div class="navbar navbar-inverse" ng-controller="NavBarCtrl">
<div class="navbar-inner">
    <div class="container">
        <button class="btn btn-navbar" ng-click="isCollapsed = !isCollapsed"> 
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
        </button> <a class="brand" href="#">Short Course</a>
        <div class="nav-collapse" uib-collapse="isCollapsed">
            <ul class="nav">
                <li><a href="#"><i class="icon-home icon-white"></i> Home</a>
                </li>
                <li><a href="#">Lessons</a>
                </li>
                <li><a href="#">Grades</a>
                </li>
            </ul>
            <ul class="nav pull-right">
                <li><a href="#/class"><i class="icon-upload icon-white"></i> Upload/Save</a>
                </li>
                <li><a href="#/class"><i class="icon-off icon-white"></i> Save/Logout</a>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
</div>
<!-- /navbar-inner -->
</div>

JS:

var myApp = angular.module('myApp', ['ui.bootstrap']);

function NavBarCtrl($scope) {
    $scope.isCollapsed = true;
}

And the fiddle – http://jsfiddle.net/KY5Mf/