fix(sidenav): Clean registry when element is destroyed

Element registry is currently kept even after element
is removed from DOM. Appart from the memory leak, it
also disable future components with same handle from
beeing pulled from the registry, for example when users
navigate away/back to a page, DOM is reloaded but new
component does not work anymore (old registry
component is called instead of the new one)

@ajoslin reported in referenced issue that registry
component will be refactored. Until then, this patch
should fix the bug on the component side.

Closes angular#473,angular#474

src/components/sidenav/sidenav.js

@@ -50,7 +50,7 @@ function mdSidenavController($scope, $element, $attrs, $timeout, $mdSidenav, $md
 
   var self = this;
 
-  $mdComponentRegistry.register(this, $attrs.componentId);
+  this.destroy = $mdComponentRegistry.register(this, $attrs.componentId);
 
   this.isOpen = function() {
     return !!$scope.isOpen;
@@ -192,6 +192,8 @@ function mdSidenavDirective($timeout, $animate, $parse, $mdMedia, $mdConstant, $
 
     $mdTheming.inherit(backdrop, element);
 
+    element.on('$destroy', sidenavCtrl.destroy);
+
     scope.$watch('isOpen', setOpen);
     scope.$watch(function() {
       return isLockedOpenParsed(scope.$parent, {

src/components/sidenav/sidenav.spec.js

@@ -114,6 +114,14 @@ describe('mdSidenav', function() {
       expect(el.hasClass('md-closed')).toBe(false);
     });
 
+    it('should deregister component when element is destroyed', inject(function($mdComponentRegistry) {
+      var el = setup('component-id="left"');
+      el.trigger('$destroy');
+
+      var instance = $mdComponentRegistry.get('left');
+      expect(instance).toBe(null);
+    }));
+
   });
 
   describe('$mdSidenav Service', function() {