I have an angular form spitted between several tabs with angular UI directive.
<form name="campaignForm" class="form-horizontal" novalidate >
<input type="text" name="title" class="input-xxlarge" placeholder="Campaign title" ng-model="campaign.title" required>
<span ng-show="campaignForm.title.$error.required" class="help-inline">
Required</span>
<tabset>
<tab>
</tab>
<input type="email" name="emailFrom" class="input-xsmall" placeholder="From email address" ng-model="campaign.info.emailFrom" required="" />
<span ng-show="campaignForm.emailFrom.$error.required" class="help-inline">
Required</span>
<tab>
<input type="text" name="emailSubject" class="input-xxlarge" ng-model="campaign.info.emailSubject" placeholder="Please enter email subject" required/>
<span ng-show="campaignForm.emailSubject.$error.required" class="help-inline">
Required</span>
</tab>
</tabset>
</form>
Please see my Plunker.
As you can see, only the input outside tabs directive works. The other inputs validation doesn't work because TABS create scopes. Any ideas how to solve this issue?