Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning

Question

I am using Angular and Twitter Bootstrap navbar and trying to get the collapse functionality to work.

Partial: program.html

Answer 1

I wanted to get it to work with pure AngularJS and no further JavaScript library and it turned out to be quite simple. There are only two changes needed starting with the example here (bootstrap v3):

Instead of

I used:

and instead of

I used:

Dropdowns

Also, if you have any dropdown menus in your navbar, the same applies to them, except the css class is not 'collapse', but 'open':

Note that multiple dropdowns will all need their own state variable on the angular root scope (if you are not using a controller). Therefore I named the first dropdown 'dd1' here, they need to be unique, otherwise multiple dropdown will open/close at the same time. (which is pretty funny, but rarely usable).