How to Increment Dynamic field ngModel name in Angularjs..? - angularjs

Question

Here when i click Add Product Button it creates a text field. But I want to create create different name for each text box in ng-model="column.product_cgst".
like column.product_cgst-1, column.product_cgst-2.
<form>
<div ng-repeat="column in columns" style="margin-bottom: 10px;">
<div class="form-group">
<input type="text" name="product_name" ng-model="column.product_name" required placeholder="Product Name" class="form-control"
id="userName">
</div>
<div class="form-group">
<select name="units" ng-model="column.units" class="form-control">
<option value="">Select Units</option>
<option ng-repeat="units in allunits" value="{{units.unit_id}}">
{{units.unit_name}}
</option>
</select>
</div>
<div class="form-group">
<input id="cgst" type="text" ng-model="column.product_cgst" placeholder="Enter CGST" required class="form-control">
</div>
<div class="form-group">
<input id="sgst" type="text" ng-model="column.product_sgst" placeholder="Enter SGST" required class="form-control">
</div>
<div class="form-group">
<input id="igst" type="text" ng-model="column.product_igst" placeholder="Enter IGST" required class="form-control">
</div>
<button class="remove btn-sm btn-danger" ng-click="removeColumn($index)">x</button>
</div>
<div class="form-group text-right m-b-0">
<button class="btn btn-primary waves-effect waves-light" type="submit">
Submit
</button>
<button class="addfields btn btn-info waves-effect waves-light" ng-click="addProduct()">Add Product</button>
</div>
</form>
Controller:
$scope.columns = [];
$scope.addProduct = function () {
var newItemNo = $scope.columns.length + 1;
$scope.columns.push({ 'colId': 'col' + newItemNo });
};
$scope.removeColumn = function (index) {
$scope.columns.splice(index, 1);
if ($scope.columns.length() === 0 || $scope.columns.length() == null) {
alert('no rec');
$scope.columns.push = [{ "colId": "col1" }];
}
};

Answer 1

You can use $index in the HTML to increment your ng-model dynamically instead of doing in controller.
Using $index in the interpolation with ngModel will not work. Try something like below
column.product_cgst[$index]

Answer 2

I get the Solutions here,only change in my angularjs controllers.
//Add Dynamic Column
$scope.columns = [{id: 'firstField'}];
$scope.addProduct = function(){
var newItemNo = $scope.columns.length+1;
$scope.columns.push({'id':'field'+newItemNo});
}
//Remove Dynamic Column
$scope.removeColumn = function() {
var itemLast = $scope.columns.length-1;
$scope.columns.splice(itemLast);
};
//Insert Data in Database:-
$scope.productAdd = function(){
$http.post('product/insert_product', $scope.columns)
.success(function(data){
console.log(data);
});
}