<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body ng-cloak ng-controller="AppController as vm">
<div class="container">
<form ng-submit="vm.onSubmit()">
<table class="table">
<tr>
<th>Feld 1</th>
<th>Feld 2</th>
<th>Feld 3</th>
<th></th>
<th></th>
</tr>
<tr ng-repeat="item in vm.myObj track by $index">
<td><input type="text" class="form-control" ng-model="item.field_1"></td>
<td><input type="text" class="form-control" ng-model="item.field_2"></td>
<td><input type="text" class="form-control" ng-model="item.field_3"></td>
<td><button type="button" class="btn btn-default" ng-click="vm.onAdd()">Add Row</button></td>
<td><button type="button" class="btn btn-default" ng-click="vm.onDelete($index)" ng-if="!$first">Delete Row</button></td>
</tr>
</table>
<div>
<button type="submit" class="btn btn-primary">Show Data</button>
</div>
</form>
<ul class="list-unstyled" ng-if="vm.results">
<li ng-repeat="item in vm.myObj">
field_1: <strong>{{item.field_1}}</strong>, field_2: <strong>{{item.field_2}}</strong>, field_3: <strong>{{item.field_3}}</strong>
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script>
angular.module('myApp', [])
.controller('AppController', [function() {
this.myObj = [{field_1: '', field_2: '', field_3: ''}];
this.onAdd = function() {
this.myObj.push({field_1: '', field_2: '', field_3: ''});
}
this.onDelete = function(index) {
this.myObj.splice(index, 1);
}
this.onSubmit = function() {
this.results = true;
}
}]);
</script>
</body>
</html>