I’m currently building off the tab starter code. The first set of tabs work great. However, I need a second set of tabs in another view.
original tabs (all these work):
tabs
tabs.home
tabs.friends
tabs.progress
new tabs (I can navigate to them but trying to change within them breaks)
depts
depts.development
depts.marketing
In the gist below, I set my depts to abstract and then the url of depts.development to an empty string as specified in the ui-router docs below. However, when I click on the other tabs (in this case, depts.marketing), it routes me back to my .otherwise() state… It’s like im there but not really THERE…
I think the problem is that I’m nesting routers and thus my states are living inside of each other… (technical term?)
I’ve read through the ui-router docs, in particular this page where it specifies using abstract:true in the parent tabs view and then leaving the child url empty so the parent tabs view direct here.
This part works, however, when I click on any of the other tabs, it navigates back to my .otherwise('tabs'); state…
Here’s a gist of my app.js
And a codepen that kind of shows my point but isn’t fully there 
See the Pen azmONv by Sante Kotturi (@skotturi) on CodePen.
I had this working in a non-ionic app, trying to bring in the magic of Ionic but having a hard time with the routing.