ng-disable tab/button when content in previous tab has not completed - angularjs

Question

I make a tab panel and declare it as form type, then i put validation ng-disabled in button& tab. i want the button available after i finish fill up two form,my button is disabled at first but when i finish fill up "first" form then it able to clicked. And also tab, it never disabled...
<div class="panel-body">
<form class="tab-content form-horizontal"name="formData" novalidate>
<div id="form-views" ui-view></div>
</form>
here my code:
button
<button type="button" ng-click="addPost()"
ngdisabled="formData.$invalid" class="btn btn-success">Submit
</button>
tab
<div class="col-lg-12 col-sm-12">
<div class="row">
<div class="col-lg-8 col-sm-8">
<div class="panel panel-tab rounded shadow">
<div class="panel-heading1 no-padding">
<ul class="nav nav-tabs nav-pills">
<li class="active" ui-sref=".personal" >
<a data-toggle="tab">
<i class="fa fa-user"></i>
<div>
<span class="text-strong">Step 1</span>
<span>Personal</span>
</div>
</a>
</li>
<li class="" ui-sref-active="active" ui-sref=".test" ng-disabled="formData.$invalid">
<a data-toggle="tab" >
<i class="fa fa-file-text"></i>
<div >
<span class="text-strong">Step 2</span>
<span>Test Date</span>
</div>
</a>
</li>
<li class="" ui-sref-active="active" ui-sref=".testDetail">
<a data-toggle="tab" >
<i class="fa fa-credit-card"></i>
<div>
<span class="text-strong">Step 3</span>
<span>Test Details</span>
</div>
</a>
</li>
</ul>
</div>
<div class="panel-sub-heading">
<div class="inner-all">
<progressbar class="progress-striped active no-margin progress-xs" value='20' max="100" type="success"><i></i></progressbar>
</div>
</div>
<div class="panel-body">
<form class="tab-content form-horizontal" name="formData"novalidate>
<div id="form-views" ui-view></div>
</form>
</div>
</div>
</div>
this is my "personal details" tab
<div class="tab-pane inner-all" id="tab3-1">
<h4 class="page-header">Personal</h4>
<div class="form-group">
<label class="col-sm-2">Name</label>
<div class="col-sm-6" ng-class="{ 'has-error' : formData.name.$invalid && !formData.name.$pristine }">
<input class="form-control" name="name" placeholder="Enter name" ng-model="formData.ngCandName" required>
<p ng-show="formData.name.$invalid && !formData.name.$pristine" class="help-block">Candidate name is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : formData.background.$invalid && !formData.background.$pristine }">
<label class="col-sm-2">University</label>
<div class="col-sm-6">
<input class="form-control" name="background" placeholder="Background" ng-model="formData.ngCandBackg" required>
<p ng-show="formData.background.$invalid && !formData.background.$pristine" class="help-block">Candidate background is required.</p>
</div>
</div>
<div class="form-group mb-0" >
<label class="col-sm-2">Gender</label>
<div class="col-sm-6" >
<div class="rdio rdio-theme inline mr-10">
<input type="radio" id="male3" ng-model="formData.gender" name="radio" value="male" required >
<label for="male3">Male</label>
</div>
<div class="rdio rdio-theme inline">
<input type="radio" id="female3" name="radio" ng-model="formData.gender" value="female" required>
<label for="female3">Female</label>
</div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : formData.tel.$invalid && !formData.tel.$pristine }">
<label class="col-sm-2" >Telephone number</label>
<div class="col-sm-6">
<input type="number" ng-maxlength="11" class="form-control" name="tel" placeholder="Telephone number" ng-model="formData.ngCandTel" required>
<p ng-show="((formData.tel.$invalid && !formData.tel.$pristine))" class="help-block">Please insert telephone number.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : formData.Email.$invalid && !formData.Email.$pristine }">
<label class="col-sm-2">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" name="Email" placeholder="Email" ng-model="formData.ngCandEmail" required>
<p ng-show="formData.Email.$error.email" class="help-block">Candidate Email is invalid.</p>
</div>
</div>