title: Angular.js "Controller as ..." + $scope.$on
body: <p>If i'd like to use the "Controller as ..." syntax in Angular, how should I approach things like $scope.$on(...) that i need to put inside the controller? </p>
  
  <p>I get an impression i could do it some other way than the one shown below. 
  Here, to get $scope.$on working i bind "this" to the callback function. I tried to invoke $on on "this" inside the controller but it didn't work. </p>
  
  <p>Could you give me a hint here or if i'm completely messing up, could you point me to some right way to do it? Thanks.</p>
  
  <p>main.js:</p>
  
  <pre><code>angular.module('ramaApp')
  .controller('MainCtrl', ['$scope', '$location', function ($scope, $location) {
  
      this.whereAmINow = 'INDEX';
  
      $scope.$on('$locationChangeStart', function(event) {
  
          this.whereAmINow = $location.path();
  
      }.bind(this));
  
      this.jumpTo = function(where) { $location.path(where); }
  }]);
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;div ng-controller="MainCtrl as main"&gt;
  
      &lt;p&gt;I am seeing the slide named: {{ main.whereAmINow }}&lt;/p&gt;
  
      &lt;div ng-click="main.jumpTo('/slide1')"&gt;Slide 1&lt;/div&gt;
      &lt;div ng-click="main.jumpTo('/slide2')"&gt;Slide 2&lt;/div&gt;
      &lt;div ng-click="main.jumpTo('/slide3')"&gt;Slide 3&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>