unable to create tabs properly with uib-tabset - html

Question

I've been trying to create tabs dynamically with uib-tabset and each tab should contain different form but in my case textbox of first form gets overwritten by new tab generated (if i enter data in one form it gets replicated to other forms). I want all tabs to contain different data.
<uib-tabset class="nav nav-tabs" role="tablist" >
<uib-tab role="presentation" ng-repeat="tab in tabs" ng-click="selectTab($index)" ng-class="{'active':selectedTab == $index}" ng-if="tab.display">
<uib-tab-heading>
<a data-target="#tab" aria-controls="home" role="tab" data-toggle="tab">{{tab.value}} <span ng-click="deleteTab($index)" class="glyphicon glyphicon-remove"></span></a>
</uib-tab-heading>
<div class="panel-body" ng-if="tab.display" >
<form ng-submit="addattributevalues()">
<div class="form-group">
<label class="col-sm-2 control-label">Regular Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="obj.regularPrice">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Sale Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="obj.salePrice" >
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Purchase Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="obj.purchasePrice">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Stock Status:</label>
<div class="col-lg-offset-2 col-lg-10>
<button class="btn btn-sm btn-white" type="submit" >Submit</button>
</div>
</form>
</div>
</uib-tab>
</uib-tabset>

Answer 1

Below is corrected code, you need to add the model properties in the same tab object. and you have used ng-if="tab.display" at uib-tab which is hiding all the other tabs, this should be removed.
<uib-tabset class="nav nav-tabs" role="tablist" >
<uib-tab role="presentation" ng-repeat="tab in tabs" ng-click="selectTab($index)">
<uib-tab-heading>
<a href="#" aria-controls="home" role="tab" data-toggle="tab">{{tab.value}}
<span ng-click="deleteTab($index)" class="glyphicon glyphicon-remove"></span></a>
</uib-tab-heading>
<div class="panel-body">
<form ng-submit="addattributevalues()">
<div class="form-group">
<label class="col-sm-2 control-label">Regular Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="tab.regularPrice">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Sale Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="tab.salePrice" >
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Purchase Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="tab.purchasePrice">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Stock Status:</label>
<div class="col-lg-offset-2 col-lg-10">
<button class="btn btn-sm btn-white" type="submit" >Submit</button>
</div>
</form>
</div>
</uib-tab>
</uib-tabset>

Answer 2

I just made use uib-tabset default attributes for show hide , so we just don't require ng-click="selectTab($index)" as it is used in below line
<uib-tab role="presentation" ng-repeat="tab in tabs" ng-click="selectTab($index)" ng-class="{'active':selectedTab == $index}" ng-if="tab.display">
I used <uib-tabset active="active"> as it automatically creates the corresponding dom elements. refer below code. Also, created one plunkr for it https://plnkr.co/edit/QxcOyFir8oYS53asDlMN?p=preview
<uib-tabset active="active" >
<uib-tab role="presentation" ng-repeat="tab in tabs" heading="{{tab.title}}" >
<uib-tab-heading>
<a data-target="#tab" role="tab" data-toggle="tab">{{tab.title}} <span class="glyphicon glyphicon-remove"></span></a>
</uib-tab-heading>
<div class="panel-body">
<form ng-submit="addattributevalues()">
<div class="form-group">
<label class="col-sm-2 control-label">Regular Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="obj.regularPrice">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Sale Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="obj.salePrice" >
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Purchase Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="obj.purchasePrice">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Stock Status:</label>
<div class="col-lg-offset-2 col-lg-10">
<button class="btn btn-sm btn-white" type="submit" >Submit</button>
</div>
</div>
</form>
</div>
</uib-tab>
</uib-tabset>
Hope this solves your problem. Here, different form get different data. Data inserted in one form is not overwritten to another.