How to validate forms in modal with tabs and angularJs - angularjs

Question

I have a modal form with angular and uib-tabset.
I have only a footer in modal.
Each tabset has a form( A B and C).
When I try enabled/disable the save button on footer, I can´t acesss
acesss the forms. They are undefined.
So, in the 'Save' button(see plunker) - formA.$invalid doesn´t works. I think it is a scope problem.
I´d prefer doesn´t put a global form to all tabs.
Is there some workaround to solve it?
Markup:
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" ng-click="doCancel()" aria-hidden="true">×</button>
<h4 class="modal-title" id="ativarSmsLabel">
Test
</h4>
</div>
<div class="modal-body">
<uib-tabset active="activePill" vertical="false" type="pills">
<uib-tab index="0" heading="Agendamento">
<form name="formA" novalidate>
<input type="text" ng-model="testA"
</form>
</div>
</div>
</div>
</uib-tab>
<uib-tab index="1" heading="Ficha">
<form name="formB" novalidate>
<input type="text" ng-model="testB"
</form>
</uib-tab>
<uib-tab index="2" heading="Histórico">
<form name="formC" novalidate>
<input type="text" ng-model="testC"
</form>
</uib-tab>
</uib-tabset>
</div>
<div class="modal-footer">
<div class="btn-toolbar">
<button type="button" class="btn btn-sm btn-primary pull-right" ng-click="saveItem()"
aria-hidden="true" ng-disabled="formA.$invalid">
Save
</button>
<button type="button" class="btn btn-sm pull-right" ng-click="doCancel()"
aria-hidden="true">
Close
</button>
</div>
</div>
</div>

Answer 1

Core AngularJS directives such as ng-repeat, ng-switch, ng-view, ng-include and ng-if all create new child scopes. As a result, the form controller will attach its API to that child scope. In this case the uib-tabset directive is transcluding to a child scope.
To access form controls on the parent scope, use the ng-form directive to create a nested form:
<form name="top">
<div ng-if="AngularExpression">
<ng-form name="formA" novalidate>
<input ng-model="userData.testA" required />
</ng-form>
</div>
</form>
<div ng-show="top.formA.$error.$required">
ERROR: input required
</div>
Also it is important to follow the "best practice" of always have a dot, '.', in your ng-models.
For more information, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?.