Navigate from parent state to children state - angularjs

Question

I have the below states, they appear in a menu which has a submenu.
What I would like to do is, when I click on the first state ('app.web'), to have in the menu both buttons 'active' (I use ui-sref-active="active" on main and sub menu <li>) and when I click on the second state, to have again both buttons 'active'.
At the moment, the below setup is
not working if I click the main menu, but
is working when I click the sub menu button.
main menu link state:
.state('app.web', {
url: '/:webID/dashboard',
views: {
'container#': {
templateUrl: '...',
}
}
sub menu link state:
.state('app.web.dashboard', {
url: '^/:webID/dashboard',
views: {
'container#': {
templateUrl: '...',
controller: '...',
}
}
}

Answer 1

I understand you want to have both links to be marked with "active" ... parent and child ... even if only parent is selected. But this is not possible...
As we can read here:
ui-sref-active
Description
A directive working alongside ui-sref to add classes to an element when the related ui-sref directive's state is active, and removing them when it is inactive. The primary use-case is to simplify the special appearance of navigation menus relying on ui-sref, by having the "active" state's menu button appear different, distinguishing it from the inactive menu items.
...
Will activate when the ui-sref's target state or any child state is active...
As shown in the doc (cited above): "Will activate when the ui-sref's target state or any child state is active".
Other words, having selected Parent - will never trigger that feature.
Here is a working plunker showing how these links will be decorated:
<a ui-sref-active="active" ui-sref="app">
<a ui-sref-active="active" ui-sref="app.web({webID:123})">
<a ui-sref-active="active" ui-sref="app.web.dashboard({webID:123})">
EXTEND: why is this plunker not working?
// working
<a ui-sref-active="current" ui-sref="home">
<a ui-sref-active="current" ui-sref="home.child1">
<a ui-sref-active="current" ui-sref="home.child2">
// NOT WORKING
<a ui-sref-active="current" href="#/home">
<a ui-sref-active="current" href="#/home/child1">
<a ui-sref-active="current" href="#/home/child2">
The point is - ui-sref-active is dependent on ui-sref. The above doc link says:
ui-sref-active can live on the same element as ui-sref or on a parent element. The first ui-sref-active found at the same level or above the ui-sref will be used.
The point is - we need ui-sref. Without that directive, the ui-sref-active simply won't work.
Some more details could be found in this answer