I have related question. In accordance to this reply by stride in https://stackoverflow.com/questions/19393559/angular-ui-tabs-add-class-to-a-specific-tab#_=_

I tried the following

 <tab heading="@Labels.userDefined 1"
                                 select="selectView('userDefined1')" class="{{form.editGuestUserFields1Form.$invalid ? 'invalid-tab' : ''}}">
                            </tab>                     
                            
                            <tab heading="@Labels.userDefined 2"
                                 select="selectView('userDefined2')" class="{{form.editGuestUserFields2Form.$invalid ? 'invalid-tab' : ''}}">
                            </tab>

First of all, we don't have valid-tab class defined in our solution, what should I use instead of ''? Secondly, it doesn't seem to work. If the tab is selected and the form is invalid, I can see when I inspect the element

<a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">User Defined 1</a>
<li ng-class="{active: active, disabled: disabled}" heading="User Defined 1" select="selectView('userDefined1')" class="active invalid-tab">
  
</li>

but when I go to the second tab, I see the following:

<li ng-class="{active: active, disabled: disabled}" heading="User Defined 1" select="selectView('userDefined1')" class="">
  
</li>

- the class is empty now and I want it to remain invalid-tab in this case. Is it because only one view / form is displayed and there is no form.editGuestUserFields1Form at all when I select different tab? In other words, do you think it's not possible with HTML to get what I want?

Thanks again.

UPDATE. I resolved first part of the problem last night by using a scope array of objects and saving the invalid status of the tab before leaving it.

The only remaining problems are valid-tab class and propagating class to inner elements as the behavior I got is not the same as invalid-tab with the previous implementation.