title: AngularJS : angular-ui-router always redirects to $urlRouterProvider.otherwise location
body: <p>I'm trying to create an SPA where you have to be logged in to access almost everything.  So naturally, the default screen you see is the login screen.  However, after a user has logged in, no matter what the ui-sref is, ui-router redirects to the login page (even when the user is authenticated).  Here is my ui-router code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function () {
  'use strict';
  angular
      .module('app', ['ui.router', 'satellizer'])
      .config(function ($stateProvider, $urlRouterProvider, $authProvider, $httpProvider, $provide) {
    
          $httpProvider.interceptors.push(['$q', '$injector', function($q, $injector){
              return {
                  responseError: function (rejection) {
                      var $state = $injector.get('$state');
                      var rejectionReasons = ['token_not_provided', 'token_expired', 'token_absent', 'token_invalid'];
                      angular.forEach(rejectionReasons, function (value, key) {
                          if (rejection.data.error === value) {
                              localStorage.removeItem('user');
                              $state.go('auth');
                          }
                      });
  
                      return $q.reject(rejection);
                  },
                  response: function(response) {
                      var authorization = response.headers('authorization');
                      if(authorization !== null) {
                          authorization = authorization.substr(7).trim();
                          //console.log(authorization);
                          var $auth = $injector.get('$auth');
                          $auth.setToken(authorization);
                      }
                      return response;
                  }
              }
          }]);
  
          $authProvider.loginUrl = 'mingdaograder/api/authenticate';
  
          $stateProvider
              .state('users', {
                  url: '/users',
                  templateUrl: 'views/userView.html',
                  controller: 'UserController as user'
              })
              .state('subjects', {
                  url: '/users/:user_id/subjects',
                  templateUrl: 'views/subjectsView.html',
                  controller: 'SubjectsCtrl as subjectsCtrl'
              })
              .state('subject', {
                  url: '/users/:user_id/subjects/:subject_id',
                  templateUrl: 'views/subjectView.html',
                  controller: 'SubjectCtrl as subjectCtrl'
              })
              .state('auth', {
                  url: '/auth',
                  templateUrl: 'views/authView.html',
                  controller: 'AuthController as auth'
              });
              //.state('otherwise', {
              //    url: '*path',
              //    templateUrl: 'views/authView.html',
              //    controller: 'AuthController as auth'
              //});
  
              //$urlRouterProvider.otherwise('/auth');
              $urlRouterProvider.otherwise(function($injector, $location) {
                  console.log("Could not find " + $location);
                  $location.path('/auth');
              });
      })
      .run(function ($rootScope, $state, $log) {
          $rootScope.$on('$stateChangeStart', function (event, toState) {
                  console.log(toState.name);
              var user = JSON.parse(localStorage.getItem('user'));
              if (user) {
                  $rootScope.authenticated = true;
                  $rootScope.currentUser = user;
              }
          }
          );
      }
  );
  })();</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anytime I try to use $state.go(<em>any state name here</em>) or even type the address into the address bar, I am always redirected to the auth state.  On the console the message is "Could not find <a href="http://localhost/#/" rel="noreferrer">http://localhost/#/</a>" for every single route.  I can type in <a href="http://localhost/#/users/5/subjects" rel="noreferrer">http://localhost/#/users/5/subjects</a> and I get the same message.</p>
  
  <p>Here is one of my controllers doing a redirect:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function () {
      'use strict';
  
      angular
          .module('app')
          .controller('AuthController', AuthController);
  
      function AuthController($auth, $state, $http, $rootScope, $log) {
          var vm = this;
  
          vm.loginError = false;
          vm.loginErrorText;
  
          vm.login = function () {
              var credentials = {
                  username: vm.username,
                  password: vm.password
              };
  
              $auth.login(credentials).then(function () {
                  return $http.get('api/authenticate/user');
              }, function (error) {
                  vm.loginError = true;
                  vm.loginErrorText = error.data.error;
              }).then(function (response) {
                  var user = JSON.stringify(response.data.user);
                  localStorage.setItem('user', user);
                  $rootScope.authenticated = true;
                  $rootScope.currentUser = response.data.user;
  
                  //$log.info('From AuthCtrl: ' + $rootScope.currentUser.id);
                  $state.go('subjects', {user_id:$rootScope.currentUser.id});
              });
          }
      }
  })();</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any ideas what I'm doing wrong?  Thanks a lot for your time.</p>
  
  <p><strong>Update</strong>:  Ok, I haven't found a way to fix it but I think I may have found a possible cause.  It seems to only happen for the routes with parameters.  For example, if I go to the <em>users</em> state, whose path is /users, there is no redirect.  However, if I go to the <em>subjects</em> state, whose path is /users/:user_id/subjects, it does redirect.  It's like the Url matching service can't recognize that /users/5/subjects matches /users/:user_id/subjects, so redirects.  Any ideas how to work around this?</p>