$state.go not working with 3rd-level nested state (using Ionic tabs / AngularUI)

Question

I'm trying to use $state.go to switch between tabs in an Ionic (+AngularJS UI Router) application, but I can't make it work with a sub-sub-state (state.substate.subsubstate). It actually works fine when moving to a sub-state (state.substate).

Here's what I mean: http://codepen.io/anon/pen/Jykmi?editors=101
Pressing the "Tab2" button neither works nor throws an error. Nonetheless, replacing the ng-click="goToState('tabs.tab2.home1')" (in line 25) with ui-sref="tabs.tab2.home1" or href="#/tabs/tab2/home1", works perfectly. Here's an example: http://codepen.io/anon/pen/DIxhC?editors=101

Even using ng-click="goToState('tabs.tab2')" would work, though that's not the intended target state.

I've found other similar questions (like this and this) but I don't think they had the same problem.

Does anybody know if $state.go should work with 3rd-level nested states?. Is the problem in my code?.

Thanks a lot in advance.
Regards,
  Rafa.

Answer 1

As ui-sref="tabs.tab2.home1" internally use $state.go and as you said ui-sref="tabs.tab2.home1" works.

My answer is yes : $state.go() should work with 3rd-level nested states.

I actually use it in my own projet with no problems (but without ionic tabs)

Answer 2

I am sorry I don't have enough reputations to add a comment.

I got the exactly same problem as you do: href or ui-sref works fine while ng-click with $state.go has no effect(the address in browser changed correctly but the view remains unredirected). I solved this problem by simply use them both at the same time:

In html:

ui-sref="tabs.tabs2.home" + ng-click="goHome()" 

or

href="#/tabs/tabs2/home" + ng-click="goHome()" 

In controller js:

$scope.goHome = function(){
    $state.go('tabs.tabs2.home');
    // or, location.path works fine too:
    // $location.path('/tabs/tabs2/home');
}

I don't know the reason, so this is only a workaround