AngularJs Add Form Fields Dynamically

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
 <script>
var myApp = angular.module("myApp", []);
 myApp.controller("myController", function($scope) {
 $scope.contacts = [{'id':1}];
 $scope.counterContacts = 1;
 $scope.counterQalifications = 1;
 $scope.qualifications = [{'id':1}];
 $scope.addMorePhone = function() { 
    $scope.counterContacts++;
	$scope.contacts.push({'id' :$scope.counterContacts});
 };
 $scope.addMoreEdu = function() { 
    $scope.counterQalifications++;
	$scope.qualifications.push({'id' :$scope.counterQalifications});
 };
  $scope.removeQualifications = function(index) { 
    if(index != -1){
	$scope.counterQalifications--;
	$scope.qualifications.splice(index,1);
	}
 };
 $scope.removePhone = function(index) { 
	if(index != -1){
	$scope.counterContacts--;
	$scope.contacts.splice(index,1);
	}
 };
});
</script>
</head>
<body>  
<div ng-app="myApp">  
<div ng-controller="myController"> 
<h3>Register Form</h3>
<form>
<table>
<tr><td>Name</td><td><input type="text" ></td></tr>
<tr><td>Email</td><td><input type="text" ></td></tr>
<tr ng-repeat="phone in contacts"><td>Phone {{$index+1}}</td><td><input type="text" name="phone-{{phone.id}}" ><button type="button" ng-click='removePhone($index);'>-Remove</button></td></tr>
<tr><td></td><td><button type="button" ng-click='addMorePhone();'>+Add More</button></td></tr>
<tr ng-repeat="edu in qualifications"><td> Qualification {{$index+1}}</td><td><input type="text" name="education-{{edu.id}}" ><button type="button" ng-click='removeQualifications($index);'>-Remove </button></td></tr>
<tr><td></td><td><button type="button" ng-click='addMoreEdu();'>+Add More</button></td></tr>

<tr><td>Submit</td><td><input type="submit" value="Submit"></td></tr>
</table>
</form>
 
</div> 
</div>
</body>  
</html>