title: Have two collapsed buttons corresponding to sidebar and navbar, want only only one at a time to be expanded
body: <p>I have a web app with a <code>sidebar</code> menus and some <code>navbar</code> dropdowns. When <code>@media screen and (max-width: 768px)</code> the <code>sidebar</code> collapses into a button the left on the <code>navbar</code>; the <code>navbar</code> buttons collapse to the right on the <code>navbar</code>.</p>
  
  <p>I only want one to be able to be opened at a time. If the other one is opened, it closes the other. Also, it would be great if clicking outside of dropdown closes too.</p>
  
  <p><strong>sidebar.directive.js</strong></p>
  
  <pre><code>angular.module('sideBar').
      directive('sideBar', function($cookies, $location){
          return {    
              restrict: 'E',
              templateUrl: '/api/templates/sidebar.html',
              link: function (scope, element, attr){
                  scope.userLoggedIn = false
                  scope.$watch(function(){
                      var token = $cookies.get('token')
                      if (token) {
                          scope.userLoggedIn = true
                      } else {
                          scope.userLoggedIn = false
                      }
                  scope.isNavCollapsedSideBar = true;
  
                  })
  
              }
          }
      });
  </code></pre>
  
  <p><strong>navbar.directive.js</strong></p>
  
  <pre><code>angular.module('cronNav').
      directive('cronNav', function($cookies, $location){
          return {    
              restrict: 'E',
              templateUrl: '/api/templates/navbar.html',
              link: function (scope, element, attr){
                  scope.userLoggedIn = false
                  scope.$watch(function(){
                      var token = $cookies.get('token')
                      if (token) {
                          scope.userLoggedIn = true
                      } else {
                          scope.userLoggedIn = false
                      }
                  scope.isNavCollapsedNav = true;
  
                  })      
              }
          }
      });
  </code></pre>
  
  <p><strong>navbar.html</strong></p>
  
  <pre><code>&lt;nav class='navbar navbar-inverse navbar-fixed-top' ng-show='userLoggedIn'&gt;
      &lt;div class='container-fluid'&gt;
  
          &lt;!-- Logo on the left of navbar  --&gt;
          &lt;div class='navbar-header'&gt;
              &lt;img src='{{ "./static/media/Trans_Small.png" }}' alt='The Company Logo' height="45"&gt;
  
              &lt;!-- The actual hamburger everything is collapsed into --&gt;
              &lt;button type='button' class='navbar-toggle pull-left' ng-click='isNavCollapsedSideBar = !isNavCollapsedSideBar'&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;/div&gt;
  
              &lt;!-- The actual hamburger everything is collapsed into --&gt;
              &lt;button type='button' class='navbar-toggle pull-right' ng-click='isNavCollapsedNav = !isNavCollapsedNav'&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;/div&gt;
  
          &lt;!-- Collapse all links and icons into the hamburger --&gt;
          &lt;div class='collapse navbar-collapse' uib-collapse='isNavCollapsedNav'&gt;
              &lt;ul class='nav navbar-nav navbar-right'&gt;
  
                  &lt;!-- Search button --&gt;
                  &lt;form class='navbar-form navbar-left'&gt;
                      &lt;div class='input-group custom-search-form'&gt;
                          &lt;input type='text' class='form-control' placeholder='Search'&gt;
                          &lt;span class='input-group-btn'&gt;
                          &lt;button class='btn btn-default' type='button'&gt;
                          &lt;i class='glyphicon glyphicon-search' title='Search'&gt;
                          &lt;/i&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
  
                  &lt;!-- Home link showing  --&gt;
                  &lt;li uib-dropdown&gt;
                      &lt;a href='' id='simple-dropdown' uib-dropdown-toggle&gt;&lt;i class='pull-right hidden-xs glyphicon glyphicon-home' title='Home'&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;ul class='center-menu cron-nav' uib-dropdown-menu&gt;
                          &lt;li&gt;&lt;h5&gt;Home&lt;/h5&gt;&lt;/li&gt;
                          &lt;li class='divider'&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='#'&gt;Stuff 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='#'&gt;Stuff 2&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;               
  
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>sidebar.html</strong></p>
  
  <pre><code>&lt;nav class='navbar navbar-inverse sidebar' role='navigation' ng-show='userLoggedIn'&gt;
      &lt;div class='container-fluid'&gt;
  
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div class='collapse navbar-collapse' uib-collapse='isNavCollapsedSideBar'&gt;
              &lt;ul class='nav navbar-nav'&gt;
  
                  &lt;!-- Original side bar before AngularJS --&gt;
                  &lt;li uib-dropdown class='top-item' auto-close='disabled' is-open='status.openA'&gt;
                      &lt;a href='' uib-dropdown-toggle&gt;Client Information &lt;i class='chev glyphicon' ng-class='{"glyphicon-chevron-up": status.openA, "glyphicon-chevron-down": !status.openA}'&gt;&lt;/i&gt;&lt;i class='pull-right hidden-xs fa fa-user-circle-o'&gt;&lt;/i&gt;&lt;/a&gt;
  
                      &lt;ul class='cron-side' uib-dropdown-menu&gt;
  
                          &lt;li&gt;&lt;h5&gt;General Information&lt;/h5&gt;&lt;/li&gt;
                          &lt;hr&gt;
                          &lt;li&gt;&lt;a href='#'&gt;View / Edit&lt;i class='pull-right hidden-xs glyphicon glyphicon-edit'&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  
                          &lt;li&gt;&lt;h5&gt;Assesment&lt;/h5&gt;&lt;/li&gt;
                          &lt;hr&gt;
                          &lt;li&gt;&lt;a href='#'&gt;View&lt;i class='pull-right hidden-xs glyphicon glyphicon-eye-open'&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  
                          &lt;hr class='h'&gt;  
  
                      &lt;/ul&gt;
                  &lt;/li&gt;           
  
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>