class AccountController {

    constructor($state, $scope, $rootScope) {

        Object.assign(this, { $state,  $scope, $rootScope });

        this.watcher = $rootScope.$on('$stateChangeStart', (event, next, current) => {
            this.currentNavItem = next.url.split('/')[1];
        });

        // IS CALLED.. but looks like memory keeps leaking and doesn't actually destory anything
        $scope.$on('$destroy', () => { 
            this.watcher();
        })

    }

    $onInit() {
        console.log('init');
        this.currentNavItem = null
        this.currentNavItem = this.$state.current.url.split('/')[1];
    }

    // IS NOT CALLED
    $onDestroy() {
        console.log('destroy') 
        this.watcher();
    }

}

AccountController.$inject = ['$state', '$scope', '$rootScope']

export default AccountController;

routes.$inject = ['$stateProvider'];

export default function routes($stateProvider) {
  $stateProvider
    .state('account', {
      url: '/account',
      template: require('./template.html'),
      controller: 'AccountController',
      controllerAs: 'account',
      resolve: {}
  }).state('account.you', {
      url: '/you',
      template: require('./tabs/you.html'),
      controller: 'YouController',
      controllerAs: 'you',
      resolve: {}
  }).state('account.users', {
      url: '/users',
      template: require('./tabs/users.html'),
      controller: 'UsersController',
      controllerAs: 'users',
      resolve: {}
  }).state('account.groups', {
      url: '/groups',
      template: require('./tabs/groups.html'),
      controller: 'GroupsController',
      controllerAs: 'groups',
      resolve: {}
  }).state('account.surveys', {
      url: '/surveys',
      template: require('./tabs/surveys.html'),
      controller: 'SurveysController',
      controllerAs: 'surveys',
      resolve: {}
    })
}