title: Angular Material , menu should not be visible after the mouse exit
body: <p>I am using angular material to display a menu and the menu will be displayed on the mouseover of the md-button. But if I didn't select an option and exit the menu, the menu is not being closed.  The JS code is like </p>
  
  <pre><code>angular.module('MyApp',['DirectiveApp'])
  .controller('AppCtrl', function($scope) {
   $scope.openMenu = function($mdOpenMenu, ev) {
        $mdOpenMenu(ev);
      };
  
      $scope.alertUser = function(args){
          alert("You Clicked : "+args);
      };
  });
  </code></pre>
  
  <p>The html code is like </p>
  
  <pre><code>&lt;md-menu&gt;
                &lt;md-button ng-mouseover="openMenu($mdOpenMenu, $event)"&gt;Call Button&lt;/md-button&gt;
                &lt;md-menu-content width="4"&gt;
                       &lt;md-menu-item&gt;
                            &lt;md-button ng-click="alertUser('Redial')"&gt;
                              Redial
                            &lt;/md-button&gt;
                          &lt;/md-menu-item&gt;
                      &lt;md-menu-item&gt;
                        &lt;md-button ng-click="alertUser('Voicemail')"&gt;
                          Check voicemail
                        &lt;/md-button&gt;
                      &lt;/md-menu-item&gt;
                  &lt;/md-menu-content&gt;
            &lt;/md-menu&gt;
  </code></pre>
  
  <p>Please find the link to plunker <a href="http://plnkr.co/edit/CgRs1YbPwrJVlvJyNHyu?p=preview" rel="nofollow">here</a></p>