fix(menu): cleanup interim element on element destroy

+ fixed typo
+ added test

Fixes #6545

  Closes #6558

src/components/menu/js/menuController.js

@@ -41,6 +41,9 @@ function MenuController($mdMenu, $attrs, $element, $scope, $mdUtil, $timeout, $r
  });
 
  $scope.$on('$destroy', this.disableHoverListener);
+ menuContainer.on('$destroy', function() {
+ $mdMenu.destroy();
+ });
  };
 
  var openMenuTimeout, menuItems, deregisterScopeListeners = [];

src/components/menu/js/menuServiceProvider.js

@@ -69,7 +69,7 @@ function MenuProvider($$interimElementProvider) {
  }
 
  /**
- * Removing the menu element from the DOM and remove all associated evetn listeners
+ * Removing the menu element from the DOM and remove all associated event listeners
  * and backdrop
  */
  function onRemove(scope, element, opts) {

src/components/menu/menu.spec.js

@@ -96,6 +96,17 @@ describe('material.components.menu', function() {
  expect(clickDetected).toBe(false);
  });
 
+ it('should remove the backdrop if container got destroyed', inject(function($document) {
+ var menu = setup();
+ openMenu(menu);
+
+ expect($document.find('md-backdrop').length).not.toBe(0);
+
+ menu.remove();
+
+ expect($document.find('md-backdrop').length).toBe(0);
+ }));
+
  it('closes on backdrop click', inject(function($document) {
 
  var menu = setup();