How to make a tab app in angularjs?

Question

JavaScript

The application consists of several tabs that are added at startup or during operation.
The user should be able to switch between tabs and come back at any time.
Tabs contain a bunch of views with a hard-to-identify state. For example, a form to fill out, or a table of query results with selections.
As far as I understand, ui-router, sticky states, deep state redirect will not cope with this, and you need to store the state directly in the DOM and its associated controllers. And do the tabs themselves in the spirit of ui-bootstrap, through the tabset/tab directives or by hand through ng-show.
The question is how to create tabs with nested views in this case?
And how to create them from controllers nested inside tabs?
Upd.Generally, if I do something like

<tabset>
<tab ng-repeat="tab in ctrl.tabs"><ng-include src="tab.src"></tab>
</tabset>

When adding/removing tabs from the controller (this.tabs), under what conditions will all tabs not be re-rendered at all?
Upd2 . To create tabs from anywhere, obviously, you need a service, with a registry of tabs and all that. But in order to attach this to the view from the previous Upd, you need a controller, which turns out to be rather strange:

.service('TabService', function() {
    this.tabs = []; /* все вкладки приложения */
    this.openTab = function() { ... };
    this.closeTab = function() { ... };
})
.controller('TabsCtrl', function TabCtrl(TabService) { 
    this.tabs = TabService.tabs; /* чтобы сделать ng-repeat */
    this.openTab = TabService.openTab; /* чтобы сделать где-нибудь ng-click="ctrl.openTab()" */
})

Upd3. When creating a tab, you need to pass the parameters to the controller that will steer it.
If you create a method

<tab ng-repeat="tab in ctrl.tabs"><ng-include src="tab.src"></tab>

And tab.src point to a piece of html in which the controller is attached - how can it reach the outer scope? And where in general in such a situation to make such a scope?

Answer 1

Working code: plnkr.co/edit/lnijKg?p=info
Idea:
* Use ng-repeat to render tabs
* Use ui-router to bind states to tabs and directives with their content
* Ignore ui-view, and controllers with templates
* Intercept state transitions to switch tabs from the service.
* Insert content using a smart-ass recompile proxy directive.

Answer 2

As far as I understand, ui-router, sticky states, deep state redirect will not cope with this

In full even cope.
I wouldn't make tabs as just tabs. I would make pseudo tabs. That is, the appearance is like tabs, but each tab has its own template.
jsfiddle.net/ktc067x1
In this example you will see how each tab can be treated as a separate template. The commented out templateUrl code loads the template file and for the example I use template.
But you probably want to have your own controller with each insert. Then you can

controllerProvider: function($stateParams) {
      var ctrlName = "Controller" + $stateParams.tab;
      return ctrlName;
}

Then you can have your own controller for each tab

app
    .controller('Controller1', function(){})
    .controller('Controller2', function(){})

And everything will be nice and neat.

Answer 3

ui-router for tabs is fine, maybe you missed something?