Update an object inside an array inside an object in AngularJS - angularjs

Question

I'm building a client collection with the following information:
"name" : "Test client",
"email" : "test#test.com",
"position" : "Project Manger",
"contacts" : [
{
"name" : "asdf",
"email" : "asdf#adf",
"tel" : "7877877878",
"title" : "asdf"
},
{
"name" : "fdas",
"email" : "fdas#fdas",
"tel" : "7877877878",
"title" : "fdsa"
}
],
I want to be able to edit/update the contacts of the client but I'm not sure how to do so with angular since I have the form inside an ng-repeat repeating the contacts of a client.
<div ng-repeat="contact in contacts track by $index">
<label>Name</label>
<input type="tel" ng-model="contact.name">
<label>Telephone</label>
<input type="tel" ng-model="contact.tel">
<label>Email</label>
<input type="email" ng-model="contact.email">
<label>Title</label>
<input type="text" ng-model="contact.title">
<md-button ng-click="save(contact)">Save</md-button>
</div>
and my controller:
'use strict'
angular.module('myApp')
.controller('ContactsCtrl', function($scope, $mdDialog, $mdMedia, client) {
$scope.client = client;
$scope.contacts = client.contacts;
$scope.save = (contact) => {
Clients.update({_id: client._id},{
$set: {
contacts : contact
}
},function(err, data){
if(err) return console.log(err);
console.log(data + " " );
$mdDialog.hide(data);
});
}
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.hide = function() {
$mdDialog.hide();
};
});
But when I press save it replaces the array with a single object.
QUESTION
How can I update the existing objects in an array that are inside a document with a form that is inside an ng-repeat?

Answer 1

change html to :
<div ng-repeat="contact in contacts track by $index">
<label>Name</label>
<input type="tel" ng-model="contact.name">
<label>Telephone</label>
<input type="tel" ng-model="contact.tel">
<label>Email</label>
<input type="email" ng-model="contact.email">
<label>Title</label>
<input type="text" ng-model="contact.title">
<md-button ng-click="save($index,contact)">Save</md-button>
</div>
and save() function to
$scope.save = (index,contact) => {
Clients.update({_id: client._id},{
$set: {
contacts[index] : contact
}
},function(err, data){
if(err) return console.log(err);
console.log(data + " " );
$mdDialog.hide(data);
});
}
hope it does the trick.

Answer 2

Was able to do a work around but I'm not sure if this is the best option.
Just add $index when doing the save function:
<md-button ng-click="save($index, contact)">Save</md-button>
and in the controller the save function:
$scope.save = (index, contact) => {
$scope.client.contacts[index] = contact;
Clients.update({_id: client._id},{
$set: {
contacts : $scope.client.contacts
}
},function(err, data){
if(err) return console.log(err);
console.log(data + " " );
$mdDialog.hide(data);
});
}