Using Angular with Twitter Bootstrap templates

Question

Would like to use the Twitter Bootstrap templates within an otherwise Angular app. Replaced Bootstrap's JS with Angular-UI , and all works well.

Except the 'hamburger' button that appears when the page is narrow doesn't work. By contrast, the dropdown that appears when the page is wide does work with Angular. Any suggestion?

http://jsfiddle.net/user645715/EJ3P7/

Specifically it's this button. Is there a directive I should include, or a directive not included in Angular UI?

 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

Answer 1

To get the 'hamburger' button to work you'll still need to include jQuery and the original Bootstrap JS even when using Angular-UI.

<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/bootstrap/1c231e4f41fd5030de26c754754a3e4860ad30c7/ui-bootstrap-tpls-0.6.0.min.js">
</script>

http://jsfiddle.net/stmcallister/zwCn4/3/