This particular functionality is actually already integrated within the ui-router.
1) You can find detailed documentation on this feature here:
ui-sref='stateName' - Allows navigation to a state without any parameters. The 'stateName' parameter can refer to any valid absolute or relative state, following the syntax rules of $state.go()
2) Further information can be accessed from this document as well:
The destination state for transition or a relative path of the state. If the path begins with ^ or ., then it is relative; otherwise, it is considered absolute.
Here are some examples:
$state.go('contact.detail') will navigate to the 'contact.detail' state
$state.go('^') will take you to a parent state.
$state.go('^.sibling') will move to a sibling state.
$state.go('.child.grandchild') will lead to a grandchild state.
3) Also, there is a demonstration available through a plunker, showcasing how this feature can be easily utilized:
By having 2 states (the aforementioned one plus its 'app.child'), you can apply this syntax within the 'app' state
<a ui-sref=".({ lang: 'en' })"> English </a>
<a ui-sref=".({ lang: 'cz' })"> Czech </a>
<a ui-sref=".child({ lang: 'en' })"> Child English </a>
<a ui-sref=".child({ lang: 'cz' })"> Child Czech </a>
This same approach could be implemented in the child state as well:
<a ui-sref=".({ lang: 'en' })"> Sibling English </a>
<a ui-sref=".({ lang: 'cz' })"> Sibling Czech </a>
Feel free to explore the example link to see it all in action...
EXTEND: Additional insights can be found in the note shared within the ui-sref documentation
A point to consider regarding relative ui-sref targets:
You have the option to use relative state paths within ui-sref, similar to the way relative paths are used in state.go(). It's important to remember that the path is relative to the state where the link is located, meaning the state that loaded the template containing the link.