angular-ui-router State transition Use $state.go to transition between states


$state.go is shorthand method to $state.transitionTo

$state.go(toState [, toParams] [, options])

This method automatically sets your options to { location: true, inherit: true, relative: $state.$current, notify: true } (unless you override them) and allows you to transition with less code.


Lets say we have an app with a 'main' state, with 2 child states: 'dashboard' and 'help', and 'dashboard' also has a child called 'about'.

Transition to another state

$state.go("main.dashboard") // from anywhere to 'main.dashboard'

Transition to parent state

$state.go("^") // from 'main.dashboard' to 'main'

You can also transit to another child of the parent state (sibling)

$state.go("^.help") // from 'main.dashboard' to

Placing a . will allow you to transition to child states

$state.go(".about") // from 'main.dashboard' to 'main.dashboard.about'