title: How to use $scope.$on in typescript and angular?
body: <p>I am new to typescript and I'm trying to convert this angular controller to typescript but I'm having issues with the <strong>$scope.$on()</strong>.</p>
  
  <pre><code>(function () {
  'use strict';
  
  angular.module('controllers').controller('NavigationController', ['$scope', '$location', 'NavigationServices',
      function ($scope, $location, NavigationServices) {
  
          var vm = this;
  
          vm.isSideBarOpen = NavigationServices.getSideBarState();
  
          vm.toggleSideBar = function () {
              NavigationServices.toggleSideBar();
          };
  
          $scope.$on('navigation:sidebar', function (event, data) {
              vm.isSideBarOpen = data;
          });
  
      }]);
  })();
  </code></pre>
  
  <p>The typescript I have try:</p>
  
  <pre><code>module app.controllers {
  
  import IScope = ng.IScope;
  import ILocationService = ng.ILocationService;
  import INavigationServices = app.services.INavigationServices;
  
  interface INavbarController {
      isSidebarOpen: boolean;
      toggleSideBar(): void;
  }
  
  class NavbarController implements INavbarController {
      isSidebarOpen: boolean;
  
      static $inject = ['$scope', '$location', 'NavigationServices'];
      constructor(private $scope: IScope, private $location: ILocationService, private NavigationServices: INavigationServices){
          var _this = this;
          _this.isSidebarOpen = this.NavigationServices.getSideBarState();
  
          this.$scope.$on('navigation:sidebar', (event: ng.IAngularEvent, data: boolean) =&gt; {
              _this.isSidebarOpen = data;
          });
      }
  
      toggleSideBar(): void {
          this.NavigationServices.toggleSideBar();
      }
  }
  
  angular.module('controllers')
      .controller('NavigationController', NavbarController);
  }
  </code></pre>
  
  <p>I get no errors but it doesn't work. Everything worked fine without the typescript.</p>
  
  <p>Here is the NavigationServices factory:</p>
  
  <pre><code>module app.services {
  'use strict';
  
  export interface INavigationServices {
      toggleSideBar(): void;
      getSideBarState(): boolean;
      closeSideBar(): void;
      openSideBar(): void;
  }
  
  class NavigationServices implements INavigationServices {
      private isSideBarOpen: boolean;
  
      constructor(private $rootScope: ng.IRootScopeService) {
          this.isSideBarOpen = false;
      }
  
      toggleSideBar(): void {
          this.isSideBarOpen = !this.isSideBarOpen;
          this.$rootScope.$broadcast('navigation:sidebar', this.isSideBarOpen);
      }
  
      getSideBarState(): boolean {
          return this.isSideBarOpen;
      }
  
      closeSideBar(): void {
          this.isSideBarOpen = false;
          this.$rootScope.$broadcast('navigation:sidebar', this.isSideBarOpen);
      }
  
      openSideBar(): void {
          this.isSideBarOpen = true;
          this.$rootScope.$broadcast('navigation:sidebar', this.isSideBarOpen);
      }
  }
  
  angular.module('services').factory('NavigationServices', ['$rootScope', ($rootScope) =&gt; new NavigationServices($rootScope)]);
  }
  </code></pre>
  
  <p>Thanks.  </p>