dynamically create add form clicking add button in angularjs - angularjs

Question

I want to create dynamic form field after i clicked to add row button.
<form name="form" class="form-validation form-inline" >
<div class="form-group">
{!!
Form::text('name',null,['class'=>'form-control','placeholder'=>'Name','data-ng-model'=>'name','required'=>'required'])
!!}
{!!
Form::text('description',null,['class'=>'form-control','placeholder'=>'Description','data-ng-model'=>'description'])
!!}
</div>
<div class="form-group">
<button class="btn btn-default " ng-disabled="form.$invalid"
data-ng-click="addTag()">
Add
</button>
</div>
Add row
<div ng-repeat="input in form">
<form name="form" class="form-validation form-inline">
<div class="form-group">
{!!
Form::text('name',null,['class'=>'form-control','placeholder'=>'Name','data-ng-model'=>'input.name','required'=>'required'])
!!}
{!!
Form::text('description',null,['class'=>'form-control','placeholder'=>'Description','data-ng-model'=>'input.description'])
!!}
</div>
<div class="form-group">
<button class="btn btn-default " ng-disabled="form.$invalid"
data-ng-click="addTag()">
Add
</button>
</div>
</form>
</div>
And the controller section is like after edited.
How should i add them in to database?
Angularjs controller:
$scope.addTag = function () {
var tag = {
name: $scope.name,
description: $scope.description
};
$http.post('tags', tag)
.success(function (data) {
console.log('www.sabin.info.np');
$scope.tags = data;
$scope.name = '';
$scope.description = '';
}).error(function (err) {
console.log('error');
});
};
and the code that i have edited is:
$scope.form = [];
$scope.addRow = function() {
$scope.form.push({
name: '',
description: ''
});
}
add row field

Answer 1

First you need to initialize the scope of the input form by specifying an array of object. Ex:
$scope.form = [];
After that, simply add this function to your controller :
$scope.addRow = function() {
$scope.form.push({
name: '',
description: ''
});
}
And use ng-repeat to iterate the form
<div ng-repeat="input in form">
<input ng-model="input.name" />
<input ng-model="input.description" />
</div>
[UPDATED]
So, I supposed you want to send the data that was inputed in each row to the backend with the endpoint of /tags. Here's how:
Actually all the form data was stored in $scope.form, which is an array of object with name and description attributes inside each of the object. So if you want to access the name/description value of the first row, you can access the value through $scope.form[0].name and $scope.form[0].description.
So the right method of sending the data is :
In HTML:
<div ng-repeat="input in form">
<input ng-model="input.name" />
<input ng-model="input.description" />
//You pass the input object throught the function params
<button ng-click="addTag(input)">Add Tag</button>
</div>
In Controller :
$scope.addTag = function (input) {
$http.post('tags', input)
.success(function (data) {
console.log('www.sabin.info.np');
}).error(function (err) {
console.log('error');
});
};