title: Odd behavior with angular-ui-router between javascript and typescript
body: <p>I am writing a large <code>angular 1.5+</code> application in <code>Typescript</code> and have hit a strange snag in the way <code>$rootScope.$on</code> is behaving.</p>
  
  <p>Using this code, there is a controller attached to the <code>sidenav</code> <code>component</code> just fine; it works great; <a href="https://embed.plnkr.co/NpjnpZ7Bj6pFG0BoAxRa/" rel="nofollow">https://embed.plnkr.co/NpjnpZ7Bj6pFG0BoAxRa/</a></p>
  
  <p>But the same code in typescript seems to keep failing. This is how I scaffold out my component...</p>
  
  <pre><code>import { Module } from 'app/common/module';
  import 'angular';
  
  class ngComponent {
      constructor() { 
         this.controller = Controller;
         this.templateUrl = '/api/views/common/sidenav.html';
      }
  }
  
  class Controller {
     static $inject = ['$rootScope','$state'];
     constructor($rootScope: ng.IRootScopeService, $state: ng.ui.IState) {
        $rootScope.$on('$stateChangeSuccess', (e: ng.IAngularEvent, to: ng.ui.IState, from: ng.ui.IState) =&gt; {
        console.log('this code never runs.');
     }
  }
  
  Module.component('sidenav', new ngComponent());
  </code></pre>
  
  <p>I'm not doing anything out of the ordinary; Here is <code>app/common/module</code>.</p>
  
  <pre><code>export var Module: ng.IModule = angular.module('myApp', ['ui.router']);
  </code></pre>
  
  <p>I can't seem to figure out why the event isn't happening.</p>