Can't get angularjs ng-click to work on an anchor using twitter bootstrap nav with dropdown

Question

My goal is to have a menu where a user can go and click a dropdown menu to logout.

I'm new to angularjs and twitter bootstrap.

Example:

<div ng-app="myApp" ng-controller="MainCtrl" class="navbar navbar-static-top">
<div class="navbar-inner">
    <div class="container">
        <a class="brand" href="#">My Brand</a>
        <ul class="nav" ng-show="isLoggedIn">
            <li class="dropdown active">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{username}}<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a ng-click"logout()" href="">Logout</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

​

I have the example here: http://jsfiddle.net/A4Gyu/1/

It's pretty simple but I've searched and haven't found a simple solution. Should I use the angular-ui in this case?

Answer 1

You forgot the '='. Also remove the href attribute:

<li><a ng-click="logout()">Logout</a></li>

In your controller you need to define the logout function:

$scope.logout = function() {
    // do sth
};