title: Handling events in ES6 Angular controllers
body: <p>I'm experimenting with ES6 classes for my controllers.</p>
  
  <p>Previously if I was listening to a rootScope event with ui-router, I could do something like this: </p>
  
  <pre><code>$rootScope.$on('stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 
      console.log(toState)
  }
  </code></pre>
  
  <p>and toState would easily be accessible.</p>
  
  <p>My ES6 controller currently looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class NavbarController {
    constructor ($rootScope) {
      this.name = 'navbar'
      this.$rootScope = $rootScope
  
      this.$rootScope.$on('stateChangeStart', this.activeNav())
    }
  
    activeNav () {
      console.log('This is called')
      return (event, toState, toParams) =&gt; {
        console.log('This is never called')
      }
    }
  }
  
  NavbarController.$inject = ['$rootScope']
  export default NavbarController</code></pre>
  </div>
  </div>
  </p>
  
  <p>From posts I had read I thought I was on the right track however the function I am returning is not called, and I can't figure out how to access the event parameters. </p>
  
  <p>So what is the correct way to handle events in ES6 angular controllers?</p>