Assign reference of object by assignment operator - angularjs

Question

I have a question about the program below. In controller, the saveContact function: if I change line ContactService.save($scope.newcontact); to $scope.contacts.push($scope.newcontact);
It seems that the program works the same. I would like to know if the reason is that when this line ($scope.contacts = ContactService.list(); get executed, the reference of contact list in the service is assigned to $scope.contacts so that push new contact to $scope.contacts is same as push new contact to the contact list in the service?
<div ng-app="app" ng-controller="ContactController">
<form class="well">
<label>Name</label>
<input type="text" name="name" ng-model="newcontact.name" />
<label>Email</label>
<input type="text" name="email" ng-model="newcontact.email" />
<label>Phone</label>
<input type="text" name="phone" ng-model="newcontact.phone" />
<br/>
<input type="hidden" ng-model="newcontact.id" />
<input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" />
</form>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{ contact.name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone }}</td>
<td> edit | delete
</td>
</tr>
</tbody>
</table>
</div>
var module = angular.module('app', []);
module.service('ContactService', function () {
//to create unique contact id
var uid = 1;
//contacts array to hold list of all contacts
var contacts = [{
id: 0,
'name': 'Viral',
'email': 'hello#gmail.com',
'phone': '123-2343-44'
}];
//save method create a new contact if not already exists
//else update the existing object
this.save = function (contact) {
if (contact.id == null) {
//if this is new contact, add it in contacts array
contact.id = uid++;
contacts.push(contact);
} else {
//for existing contact, find this contact using id
//and update it.
for (i in contacts) {
if (contacts[i].id == contact.id) {
contacts[i] = contact;
}
}
}
}
//simply search contacts list for given id
//and returns the contact object if found
this.get = function (id) {
for (i in contacts) {
if (contacts[i].id == id) {
return contacts[i];
}
}
}
//iterate through contacts list and delete
//contact if found
this.delete = function (id) {
for (i in contacts) {
if (contacts[i].id == id) {
contacts.splice(i, 1);
}
}
}
//simply returns the contacts list
this.list = function () {
return contacts;
}
});
module.controller('ContactController', function ($scope, ContactService) {
$scope.contacts = ContactService.list();
$scope.saveContact = function () {
//ContactService.save($scope.newcontact);
$scope.contacts.push($scope.newcontact); ----change here
$scope.newcontact = {};
}
$scope.delete = function (id) {
ContactService.delete(id);
if ($scope.newcontact.id == id) $scope.newcontact = {};
}
$scope.edit = function (id) {
$scope.newcontact = angular.copy(ContactService.get(id));
}
})
Link to the original program.

Answer 1

It's not quite the same. The array pointed to by $scope.contacts and the array used internally by ContactsService are the same array, but ContactsService is doing work in save that you are not doing by pushing directly on to $scope.contacts.
Specifically, if the contact you are adding is a new contact (one that doesn't have an id) then it adds an id for it. Additionally, save will update an existing contact.
Your change will appear to work because you are adding the contact to the ContactsService internal array, but you are bypassing the API the ContactsService has specified.
Your method could end up duplicating contacts in the list as well by indiscriminately adding them.