The most updated pen is at:
@gnomeontherun wrote it and it solves tabs and side menu (s) (there is a left and right menu)
It was updated by @gnomeontherun to show the case of having the side menu items (in this pen it is the right menu items) link to a page that is not under one of the tabs, like the those left menu items are.
If you want the right side items to have a tab, you can add that manually( I cut and pasted my tabs code from tabs.html into that side menu item’s template) or you can put those items under one of the tabs in the index.js $statProvider code, just copy the format of, for example, how the “facts” view is defined and put the view of the side menu item under a tab in the same way.
If you don’t put the side menu page under a tab and want to add a tab bar to it manually into its template, you can also us ng-include to keep it Don’t Repeat Yourself DRY. Other wise you will possibly, depending on how many non-tab pages you have, need to update your tabs in multiple places which can lead to errors.
I haven’t used ng-include (or would it be data-ng-include) in my situation. I have found that if I put all the side menu pages under one tab ( in this case they all generally pertain to settings and help) then when I navigate the side menu items, they retain back arrow history too, which is feels elegant and useful for how I am using it. Bonus.
@gnomeontherun has mentioned that doing this might cause issues with child states, but I don’t know enough yet to anticipate what problems this might cause.