>Not easy to see the problem amongst so much code without a runnable example. But it seems to me that this isn't really a 'Tab' control. You just have a set of buttons that inject the relevant view into the same area using $state.go. This means that when you go to any 'Tab' the view state of the existing view is lost.
>
>It would be better if each tab had its own content which is shown or hidden depending on whether it is 'active'

I think tabs here achieve delayed instantiation, e.g. if we never open that tab, we don't want to load all related content.

Our static forms have the following markup:

<div class="widget-content">
                <div class="padd scrollable widget-resize">

                    @Html.Partial("_EditFormAlerts")
                    <div class="col-lg-3 col-md-3 panel-container">
                        <ul class="nav nav-pills nav-stacked">
                            <li class="active"><a data-toggle="pill" href="#paymentTypes" ng-class="{true: 'invalid-tab', false: ''}[form.EditPaymentTypeForm.$invalid]">@Labels.general</a></li>
                            <li><a data-toggle="pill" href="#udf" ng-class="{true: 'invalid-tab', false: ''}[form.UserDefinedFields.$invalid]">@Labels.userDefinedFields</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-9 col-md-9 panel-container">
                        <div class="tab-content">
                            <div class="tab-pane active" id="paymentTypes">
                                @Html.Partial("EditPaymentTypeForm")
                            </div>
                            <div class="tab-pane" id="udf">
                                @Html.Partial("UserDefinedFields")
                            </div>
                        </div>
                    </div>
                </div>
            </div>

So, all views are embedded into the form and therefore we don't have problems with the state or dirty flags. I forgot right now which problems are associated with that implementation.

But we also defined few forms with tabs from angular-ui. I somehow was solving the problems I mentioned. Now we want to have a directive for the tabs. I think it's a good idea, but the way of solving the problem with invalid state and dirty status I think is to get access to the form from the directive, before switching to the next tab save form's invalid state and dirty status, set forms's dirty and invalid to that state.

So, in order to try that idea I need to get hold of the form holding the directive. So, this is my first question - how to get it.

I also tried to ask this question on StackOverflow

http://stackoverflow.com/questions/33659400/angularjs-tabs-control-where-each-tab-is-a-view

with what I've tried so far.