title: Redirect state in angularjs
body: <p><strong>This is the state configuration:</strong>  </p>
  
  <pre><code>angular
      .module('grabhutApp', [...])
      .config(function ($stateProvider, $urlRouterProvider) {
  
          $stateProvider
              // ACCOUNT
              .state('account', {
                  abstract: true,
                  url: '/account',
                  templateUrl: 'index.html'
              })
              .state('account.main', {
                  url: '',
                  templateUrl: 'views/account/account.login.html',
                  controller: 'AccountController'
              })
              .
              .
              .
              // NO VIEWS
              .state('nv', {
                  abstract: true,
                  url: '/nv'
              })
              .state('nv.logout', {
                  url: '/logout'
              })  
      });
  </code></pre>
  
  <p>The <code>nv</code> and its sub states will have no physical views or controllers.<br>
  I want them to serve as links that calls certain functions.  </p>
  
  <p><strong>Service for calling logout methods:</strong>  </p>
  
  <pre><code>angular.module('grabhutApp')
      .factory('$grabhutAccountService', function ($state, $grabhutDataService) {
  
          var methods = {     
              .
              .
              logoutUser: function () {
                  $grabhutDataService.user.removeSession();
                  $state.go('account.main', {}, {location: 'replace'});
              }
              .
              .
          };
  
          return methods;
      });
  </code></pre>
  
  <p><strong>Then a button/link for logout:</strong>  </p>
  
  <pre><code>&lt;a ui-sref="nv.logout" class="button icon icon ion-log-out button-large" menu-close&gt;&lt;/a&gt;  
  </code></pre>
  
  <p>What I want to happen is that, when state <code>nv.logout</code> was triggered the<br>
  <code>$grabhutAccountService.logoutUser()</code> must be called and must redirect to <code>'account.main'</code>  </p>
  
  <p>Here is what I've done so far:<br>
  <strong>I tried to use resolve in <code>nv.logout</code></strong>  </p>
  
  <pre><code>.state('nv.logout', {
      url: '/logout',
      resolve: {
          logout: function ($grabhutAccountService) {
              $grabhutAccountService.logoutUser();
          }
      }
  }) 
  </code></pre>
  
  <p>The service was called but state did not redirect. So I tried another way. I added a controller:  </p>
  
  <pre><code>.state('nv.logout', {
      url: '/logout',
      resolve: {
          logout: function ($grabhutAccountService) {
              $grabhutAccountService.logoutUser();
          }
      },
      controller: function ($scope, $state) {
          $scope.$on('$stateChangeSuccess', function () {
              $state.go('account.main');          
          });
      }   
  })  
  </code></pre>
  
  <p>But <code>$stateChangeSuccess</code> is not being fired.<br>
  <strong>So I tried to use the rootScope:</strong>  </p>
  
  <pre><code>.run(function(...., $grabhutAccountService){
  
      .
      .
      .
      $rootScope.logout = function(){
          $grabhutAccountService.logoutUser();
      };
      .
      .
      .
  
  })  
  </code></pre>
  
  <p><strong>And the use it like this:</strong>  </p>
  
  <p><code>&lt;a ng-click="$root.logout()" class="button icon icon ion-log-out button-large" menu-close&gt;&lt;/a&gt;</code>  </p>
  
  <p>This works fine. But I'm worrying since (AFAIK) rootScope loads more data which could cause slower operation.<br>
  Besides, whenever I need some kind of function like above, I would have to attach function in rootScope again.<br>
  And I think that's not a good approach. BTW, I'm building this in phonegap that's why memory usage is so important.  </p>