title: element.on($destroy) shows element is not defined in angular
body: <p>I am trying to cancel the $interval event in my directive while changing the route or state of the application. I found this code which could act in destroy event.</p>
  
  <p>But this returns my element is not defined. Do I have to inject any service or directive in the controller. </p>
  
  <pre><code>element.on('$destroy', function() {
            console.log("cancelling interval");
            $interval.cancel(promise);
          });
  </code></pre>
  
  <p>Error:</p>
  
  <pre><code>ReferenceError: element is not defined
      at new Controller (http://localhost:port/src/controller.js
      at invoke (http://localhost:port/bower_components/angular/angular.js:4182:17)
      at Object.instantiate (http://localhost:port/bower_components/angular/angular.js:4190:27)
      at http://localhost:port/bower_components/angular/angular.js:8453:28
      at $interpolate.compile (http://localhost:port/bower_components/angular-ui-router/release/angular-ui-router.js:3897:28)
      at invokeLinkFn (http://localhost:port/bower_components/angular/angular.js:8217:9)
      at nodeLinkFn (http://localhost:port/bower_components/angular/angular.js:7726:11)
      at compositeLinkFn (http://localhost:port/bower_components/angular/angular.js:7075:13)
  </code></pre>
  
  <p>Thanks in advance
  Code is pretty long, so posting the snipper where is called.
  Updated:</p>
  
  <pre><code>   (function ()
     { 
     'use strict'; 
     angular .module('app')
     .controller('Controller', Controller); 
     Controller.$inject = ['Service', '$modal', '$interval', '$scope']; 
     function Controller(Service, $modal, $interval, $scope)
     { 
       console.log("Beginning");
       var ctrl = this;
       $scope.headerName= "Header Name";
       ctrl.selected = {};
       setupData(); 
       var promise = $interval(setupData, 1000000);
       $scope.on('$destroy', function()
       { 
       $interval.cancel(promise); 
       });
  </code></pre>