title: Angular UI Bootstrap responsive Navbar dropdown not working properly in new version
body: <p>I just created an <code>AngularJS</code> project with <code>grunt</code> <code>bower</code> and <code>Yeoman</code>. Included Updated version to <code>Angular 1.3.13</code>. I want to use <code>Angular UI</code> bootstrap. I added Nav Bar which is responsive. But while on small screens, the drop down doesn't seem to work. When I click on dropdown the entire menu hides.</p>
  
  <p>here is my <strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html class="no-js"&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) styles/main.css --&gt;
  &lt;link rel="stylesheet" href="styles/main.css"&gt;
  &lt;!-- endbuild --&gt;
  &lt;/head&gt;
  &lt;body ng-app="webClientApp"&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;!-- Add your site or application content here --&gt;
      &lt;header&gt;
          &lt;nav class="navbar navbar-default" role="navigation"&gt;
              &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
              &lt;div class="navbar-header"&gt;
  
                  &lt;button type="button" class="navbar-toggle"
                      ng-init="navCollapsed = true"
                      ng-click="navCollapsed = !navCollapsed"&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;Web Client&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
              &lt;div class="collapse navbar-collapse"
                  ng-class="!navCollapsed &amp;&amp; 'in'" ng-click="navCollapsed=true"&gt;
  
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="active"&gt;&lt;a href=""&gt;Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Link&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li class="dropdown"&gt;&lt;a href="" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown
                              &lt;b class="caret"&gt;&lt;/b&gt;
                      &lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a href=""&gt;Action&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=""&gt;Another action&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=""&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=""&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=""&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
                  &lt;form class="navbar-form navbar-left" role="search"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" class="form-control" placeholder="Search"&gt;
                      &lt;/div&gt;
                      &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
                  &lt;/form&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;&lt;a href=""&gt;Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown"&gt;&lt;a href="" class="dropdown-toggle"
                          data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a href=""&gt;Action&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=""&gt;Another action&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=""&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=""&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;!-- /.navbar-collapse --&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;div class="container"&gt;
          &lt;div ng-view=""&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="footer"&gt;
          &lt;div class="container"&gt;
              &lt;p&gt;
                  &lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt; from the Yeoman team
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;!-- Google Analytics: change UA-XXXXX-X to be your site's ID --&gt;
      &lt;script&gt;
          !function(A, n, g, u, l, a, r) {
              A.GoogleAnalyticsObject = l, A[l] = A[l] || function() {
                  (A[l].q = A[l].q || []).push(arguments)
              }, A[l].l = +new Date, a = n.createElement(g), r = n
                      .getElementsByTagName(g)[0], a.src = u, r.parentNode
                      .insertBefore(a, r)
          }(window, document, 'script',
                  '//www.google-analytics.com/analytics.js', 'ga');
  
          ga('create', 'UA-XXXXX-X');
          ga('send', 'pageview');
      &lt;/script&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/angular/angular.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-animate/angular-animate.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-resource/angular-resource.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-route/angular-route.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-touch/angular-touch.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.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;script src="scripts/controllers/about.js"&gt;&lt;/script&gt;
      &lt;!-- endbuild --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm using all latest versions of JS. Here is my <strong>bower.json</strong></p>
  
  <pre><code>{
    "name": "web-client",
    "version": "0.0.0",
    "dependencies": {
      "angular": "^1.3.13",
      "bootstrap": "^3.3.2",
      "angular-animate": "^1.3.13",
      "angular-cookies": "^1.3.13",
      "angular-resource": "^1.3.13",
      "angular-route": "^1.3.13",
      "angular-sanitize": "^1.3.13",
      "angular-touch": "^1.3.13",
      "angular-bootstrap": "0.12.1"
    },
    "devDependencies": {
      "angular-mocks": "^1.3.13"
    },
    "appPath": "app",
    "moduleName": "webClientApp"
  }
  </code></pre>
  
  <p>The nav bar on full screen is working fine. But when I resize the browser size, The responsive bar is working. <strong>Menu will show up only on clicking the toggle buton. But when I click on drop down menu, the entire menu hides.</strong></p>
  
  <p>I have followed this <a href="https://stackoverflow.com/q/16268606/2353403">StackOverflow Question</a> and I got one <a href="http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview" rel="nofollow noreferrer">Plunker Demo</a> for it. It is working fine there.</p>
  
  <p>But I'm using Latest versions of all files. So mine is not working. Here is <a href="http://plnkr.co/edit/SMJaBBJhwoXsE8bZNQ9R?p=preview" rel="nofollow noreferrer">my code what I tried in Plnker</a>.</p>
  
  <p>How to Solve this Issue? Thanks.</p>