title: Angular Material MenuBar with arrow toggle doesn't toggle correctly
body: <p>I'm using Angular Material MenuBar and attempting to add an arrow toggle, so that when the menu is open the arrow is up, and toggles down when closed.</p>
  
  <p>I'm able to use <code>ng-show</code> to trigger it when clicked. However if the user clicks out changing focus, closing the menu (without re-clicking the menu) the arrow is now in the wrong state and does not toggle back.</p>
  
  <p>I also tried <code>ng-blur</code> which did not work the way I had hoped.</p>
  
  <p>I think I need to watch the close event on the menu, but I'm not sure the best way to do that with <code>md-menu-bar</code>. Any suggestions on the best way to implement this toggle arrow?</p>
  
  <pre><code>  &lt;md-menu-bar id="user-menu"&gt;
      &lt;md-menu md-position-mode="left bottom"&gt;
        &lt;md-button class="user-button" ng-click="$mdOpenMenu($event); model.UserMenuOpen = !model.UserMenuOpen;" aria-label="User Settings"&gt;
            &lt;span class="username" hide-xs ng-if="profile"&gt;{{profile.firstName}} {{profile.lastName}}&lt;/span&gt;
  
            &lt;md-icon md-font-icon="icon-chevron-down" class="icon s16" ng-show="model.UserMenuOpen"&gt;&lt;/md-icon&gt;
            &lt;md-icon md-font-icon="icon-chevron-up" class="icon s16" ng-show="!model.UserMenuOpen"&gt;&lt;/md-icon&gt;          
          &lt;/div&gt;
        &lt;/md-button&gt;
  
        &lt;md-menu-content&gt;
          &lt;md-menu-item&gt;
            &lt;md-icon md-font-icon="icon-cart-outline" class="icon"&gt;&lt;/md-icon&gt;
            &lt;md-button&gt;Cart&lt;/md-button&gt;
          &lt;/md-menu-item&gt;
          &lt;md-menu-item&gt;
            &lt;md-icon md-font-icon="icon-account" class="icon"&gt;&lt;/md-icon&gt;
            &lt;md-button&gt;Profile&lt;/md-button&gt;
          &lt;/md-menu-item&gt;
        &lt;/md-menu-content&gt;
      &lt;/md-menu&gt;
    &lt;/md-menu-bar&gt;
  </code></pre>