title: How to close md-panel(converted to popover) on mouseout event
body: <p>I was successfully able to convert angular material's md-panel component to  popover (as AM don't have a separate component like md-popover) and display it on mouseover event. md-panel can be closed on click anywhere in the body by method 'clickOutsideToClose'.
  But there isn't any method I can call on ng-mouseout to close/destroy the md-panel component.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="MyApp"&gt;
    &lt;div ng-controller="MainCtrl"&gt;
      &lt;md-button class="md-popover" ng-mouseover="showPopover($event)"&gt;Show Popover&lt;/md-button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.simple-popover {
      min-width: 50px;
      min-height: 20px;
      padding: 16px;
      background: #fafafa;
      opacity: 1;
      -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      -webkit-transform: translate(0, 0) scale(1);
      transform: translate(0, 0) scale(1);
      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  }
  
  .md-popover:focus {
      outline: none;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>(function(){
  var app = angular.module('MyApp',['ngMaterial'])
  app.controller('MainCtrl', function MainCtrl($scope, $mdPanel) {
    $scope.showPopover  = function(ev) {
      var position = $mdPanel.newPanelPosition()
          .relativeTo('.md-popover')
          .addPanelPosition($mdPanel.xPosition.ALIGN_START, $mdPanel.yPosition.BELOW);
          var panelAnimation = $mdPanel.newPanelAnimation()
              .openFrom('.md-popover')
              .closeTo('.md-popover')
              .withAnimation($mdPanel.animation.SCALE);
      var config = {
        attachTo: angular.element(document.body),
        template: 'This is a simple popover',
        panelClass: 'simple-popover',
        animation: panelAnimation,
        position: position,
        openFrom: ev,
        clickOutsideToClose: true,
        escapeToClose: true,
        focusOnOpen: false
      }
      $mdPanel.open(config);
    }
  });
  })();
  </code></pre>
  
  <p>JS fiddle working example:
  <a href="https://jsfiddle.net/rxby6cac/14/" rel="nofollow noreferrer">https://jsfiddle.net/rxby6cac/14/</a></p>
  
  <p>Any idea/work around how I can close md-panel on mouseleave/mouseout event.</p>