Directing the user to a child state when they are transitioning to its parent state using UI-Router

1. First, add a property to the 'manager.staffDetail.view' state of abstract:true. This isn't required, but you want to set this since you'd never go to this state directly, you'd always go to one of it's child states.

2. Then do one of the following:

   • Give the 'manager.staffDetail.view.schedule' state an empty URL. This will make it match the same url as it's parent state url, because it appends nothing to the parent url.

     .state('manager.staffDetail.view.schedule', {url:'', ...

   • Or if you want to keep the url of the default child route unchanged, then set up a redirect in your module.config. This code here will redirect any location of '/staff/{id}/view' to the location of '/staff/{id}/view/schedule':

     $urlRouterProvider.when('/staff/{id}/view', '/staff/{id}/view/schedule');

For setting default child view , check this example . On clicking Route 1 load default state route1.list

// For any unmatched url, send to /route1$stateProvider  .state('route1', {      url: "/route1",      abstract:true ,      templateUrl: "route1.html"  })  .state('route1.list', {      url: '',      templateUrl: "route1.list.html",      controller: function($scope){        $scope.items = ["A", "List", "Of", "Items"];      }  })  .state('route1.desc', {      url: "/desc",      templateUrl: "route1.desc.html",      controller: function($scope){        $scope.items = [];      }  })  .state('route2', {    url: "/route2",    templateUrl: "route2.html"  })  .state('route2.list', {    url: "/list",    templateUrl: "route2.list.html",    controller: function($scope){      $scope.things = ["A", "Set", "Of", "Things"];    }  })

I ran into the same issue and found this solution to work:

https://github.com/angular-ui/ui-router/issues/948#issuecomment-75342784

This is quoted from @christopherthielen on github

"For now, don't declare your state abstract, and use this recipe:"

 app.run($rootScope, $state) {    $rootScope.$on('$stateChangeStart', function(evt, to, params) {      if (to.redirectTo) {        evt.preventDefault();        $state.go(to.redirectTo, params)      }    });  }  $stateProvider.state('parent' , {      url: "/parent",      templateUrl: "parent.html",      redirectTo: 'parent.child'  });  $stateProvider.state('parent.child' , {      url: "/child",      templateUrl: "child.html"  });

Here is breakdown of how the process works:

1. User navigates to state “parent”
2. “$stateChangeStart” event gets fired
3. Listener for “$stateChangeStart” catches event and passes “toState” (which is “parent”) and “event" to the handler function
4. Handler function checks if “redirectTo” is set on “toState”.
5. If “redirectTo” IS NOT set, nothing happening and the user continues on to the “toState” state.
6. If “redirectTo" IS set, the event is canceled (event.preventDefault) and $state.go(toState.redirectTo) sends them to the state specified in “redirectTo” (which is “parent.child”).
7. The “$stateChangeStart” event gets fired again, but this time “toState” == “parent.child” and the “redirectTo” option is not set, so it continues to “toState”.