title: Dropdown in Nav bar not working with Bootstrap and Angular
body: <p>I am learning Angular and Bootstrap.  I have some code generated by Yeoman and I have a situation where normal links in my Nav bar are working fine.  However, drop down items are not working (the drop down appears in the nav bar but does not expand when clicked).  As you can see, I have put my navbar code into the view itself.</p>
  
  <p>The interesting part is that the nav bar code will actually work when it is in the container (e.g. index.html).</p>
  
  <p>The question I have is why isn't my navbar code working as expected in the view where it works fine in the container?</p>
  
  <p>Here is my navbar code within the view with Nav bar drop down not working (important to note that the other nav bar items seem to be working fine):</p>
  
  <pre><code>&lt;!--  The nav bar within the view.html does not work for drop down in the nav bar.
        In the main 'index' file it works fine --&gt;
  &lt;nav id="myNavbar" class="navbar navbar-default" role="navigation"&gt;
   &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;Messages &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Inbox&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Drafts&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sent Items&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Trash&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle glyphicon glyphicon-user"&gt; Admin &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Log out&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt; 
  
  &lt;div class="jumbotron"&gt;
    &lt;h1&gt;'Allo, 'Allo&lt;/h1&gt;
    &lt;p class="lead"&gt;
      &lt;img src="images/yeoman.png" alt="I'm Yeoman"&gt;&lt;br&gt;
      Always a pleasure scaffolding your apps.
    &lt;/p&gt;
    &lt;p&gt;&lt;a class="btn btn-lg btn-success" ng-href="#"&gt;Splendid!&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="row marketing"&gt;
    &lt;h4&gt;HTML5 Boilerplate&lt;/h4&gt;
    &lt;p&gt;
      HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
    &lt;/p&gt;
  
    &lt;h4&gt;Angular&lt;/h4&gt;
    &lt;p&gt;
      AngularJS is a toolset for building the framework most suited to your application development.
    &lt;/p&gt;
  
    &lt;h4&gt;Karma&lt;/h4&gt;
    &lt;p&gt;Spectacular Test Runner for JavaScript.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="footer"&gt;
    &lt;p&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt; from the Yeoman team&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the code for my container (index.html) as generated by Yoeman. The nav bar code should be the same as above.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;!--[if lt IE 7]&gt;      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;         &lt;html class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;         &lt;html class="no-js lt-ie9"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js"&gt; &lt;!--&lt;![endif]--&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;!-- Place favicon.ico and apple-touch-icon.png in the root directory --&gt;
      &lt;!-- build:css styles/vendor.css --&gt;
      &lt;!-- bower:css --&gt;
      &lt;link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /&gt;
      &lt;!-- endbower --&gt;
      &lt;!-- endbuild --&gt;
      &lt;!-- build:css({.tmp,app}) styles/main.css --&gt;
      &lt;link rel="stylesheet" href="styles/main.css"&gt;
      &lt;!-- endbuild --&gt;
    &lt;/head&gt;
    &lt;body ng-app="employerApp"&gt;
      &lt;!--[if lt IE 7]&gt;
        &lt;p class="browsehappy"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="http://browsehappy.com/"&gt;upgrade your browser&lt;/a&gt; to improve your experience.&lt;/p&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- Putting this code back into the index does make the dropdown in the nav bar work --&gt;
  
      &lt;!-- &lt;nav id="myNavbar" class="navbar navbar-default" role="navigation"&gt;
       &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;Messages &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Inbox&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Drafts&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Sent Items&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Trash&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle glyphicon glyphicon-user"&gt; Admin &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Log out&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt; --&gt;
  
      &lt;!-- Add your site or application content here --&gt;
      &lt;div class="container" ng-view=""&gt;&lt;/div&gt;
  
      &lt;!-- Google Analytics: change UA-XXXXX-X to be your site's ID --&gt;
       &lt;script&gt;
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
         })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  
         ga('create', 'UA-XXXXX-X');
         ga('send', 'pageview');
      &lt;/script&gt;
  
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="bower_components/es5-shim/es5-shim.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/json3/lib/json3.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- build:js scripts/vendor.js --&gt;
      &lt;!-- bower:js --&gt;
      &lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;  
      &lt;script src="bower_components/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-resource/angular-resource.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-cookies/angular-cookies.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-sanitize/angular-sanitize.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
      &lt;!-- endbower --&gt;
      &lt;!-- endbuild --&gt;
  
          &lt;!-- build:js({.tmp,app}) scripts/scripts.js --&gt;
          &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/controllers/main.js"&gt;&lt;/script&gt;
          &lt;!-- endbuild --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>To test, I am using Chrome and I don't see any errors coming through the console.  I am using Bootstrap 3.</p>
  
  <p>Thanks for your help.</p>
  
  <p>Regards,
  Gaj</p>