No navigation with second set of tabs

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 :frowning:

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.