title: AngularJS doesn't remove $scope.$on when destroying $scope
body: <p>I have a simple app built with AngularJS:</p>
  
  <pre><code>var App = angular.module('myApp', [], function($window) {
    // settings..
  }).run(function($rootScope){
     $(window).on('resize', function(event) {
          $rootScope.$broadcast('windowResize',{
              height: event.target.innerHeight,
              width: event.target.innerWidth
          });
      });
  });
  </code></pre>
  
  <p>I have a directive, <code>panel</code>, with the following controller:</p>
  
  <pre><code>function($scope, $element) {    
      var
          $title = $element.find('.panel-title'),
          $content = $element.find('.panel-content'),
          margin = 20
      ;
      $content
          .height($(window).height() - $title.height() - margin);
  
      $scope.$on('windowResize', function(obj) {
          var height = obj.height - $title.height()  - margin;
          $content.height(height);
      });
  }
  </code></pre>
  
  <p>All works perfectly the first time. When the controller changes, however, I get problems like <code>TypeError: Cannot read property '$$childHead' of null</code>, but I can get the error.</p>
  
  <p>The problem is with <code>$scope.$on</code>. How can I remove this before destroying the $scope (when the controller changes)?</p>