title: $destroy event not being called on navigation
body: <p>I have registered for hardware back button event <code>registerBackButtonAction</code> inside my controller and using <code>$destroy</code> event to unregister the event. But the event is not getting called when I navigate to different page (state). What am I missing?</p>
  
  <pre><code>.controller('HomeCtrl', function($scope, $ionicPlatform, $location, $rootScope, $http) {
    // Register hardware back button
    var deregister = $ionicPlatform.registerBackButtonAction(function (event) {
      navigator.app.exitApp();
      return;
    }, 100);
  
    console.log('scope on');
    $scope.$on('$destroy', function() {
      console.log('destroy called');
      deregister();
    })
  })
  </code></pre>
  
  <p>In console I dont see <code>destroy called</code>. Please help me fix this.</p>
  
  <p><strong>Update:</strong>
  In the browser when I navigate from Home to Login the elements of Home still exist in the browser. I guess that is the reason why destroy is not getting called. So the question is should I fire the event manually or should be Home page be actually destroyed when I move to Login?</p>
  
  <p>Here is my index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"&gt;
      &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
      &lt;!-- ionic/angularjs js --&gt;
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
      &lt;!-- cordova script (this will be a 404 during development) --&gt;
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
      &lt;!-- Push notification --&gt;
      &lt;script src="js/PushNotification.js"&gt;&lt;/script&gt;
      &lt;!-- Geo location --&gt;
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false&amp;language=en"&gt;&lt;/script&gt;
      &lt;!-- app js --&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-app="starter" ng-controller="AppCtrl"&gt;
      &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The page are loaded as part of state via template in app.js:</p>
  
  <pre><code>  .state('app.login', {
      url: "/login",
      views: {
        'menuContent': {
          templateUrl: "templates/login.html",
          controller: 'LoginCtrl'
        }
      }
    })
  
    .state('app.home', {
      url: "/home",
      views: {
        'menuContent': {
          templateUrl: "templates/home.html",
          controller: 'HomeCtrl'
        }
      }
    })
  </code></pre>