How to relate view and controller when user can add input field? - angularjs

Question

This is my HTML code in angular template. In my controller I have
$scope.contacts.
Every contact in $scope.contacts can have multiple contact.fields. You can see I have 2 ng-repeat here, for every contact and every contact.field. User can add contact manually, and for every contact it is defined how many fields it has. So user click on plus and contact with empty fields is added. My question is: how to bind view with $scope.contacts, so when user adds new contact, it shows up in $scope.contacts?
<div id="contactsContainer">
<div id="{{contact.divId}}" ng-style="{'border': contact.borderStyle}"
class="form-group {{contact.divId}}" ng-mouseover="hoverIn()"
ng-mouseleave="hoverOut()" ng-repeat="contact in contacts track by $index">
<label class="col-sm-3 control-label">{{ translate[contact.keyTranslationName]}}</label>
<div id="fieldContainer" class="col-sm-4">
<div id="currentField" class="row mb5"
ng-repeat="field in contact.field track by $index">
<div id="{{contact.idPersonContact}}"
class="{{field.width}} has-icon pull-left">
<input name="{{field.name}}"
id="{{field.id}}"
placeholder="{{ translate[field.keyTranslationPlaceholder] }}"
class="form-control" value="{{field.value}}"
style="background-image: url();background-position: left;background-repeat: no-repeat;background-size:20px;">
</div>
</div>
</div>
</div>

Answer 1

<input type="button" ng-click="addContact()" />
// Controller
$scope.addContact = function(){
$scope.contacts.push({field : []});
// or field : Array(defaultFieldSize)
$scope.contacts.push({field : new Array(5) }); // Contact with 5 empty fields
}

Answer 2

Adding a contact in the contacts collection would do it. So when the user creates the new contact using the button you would do something like:
var newContact = {
field1:'',
field2: ''
...
}
and then just add the new contact to the contacts collection.
$scope.contacts.push(newContact);
ng-repeat will detect the change in the collection and render it.