Ionic pass data - html

Question

I got these codes online and below are what the codes are supposed to achieve as stated by the owner.
The user can add a new contact (name, email address and phone number)
List of contacts should be shown
The user can delete any contact from the contact list
The User can edit any contact from the contact list
However, when I tried it out, there is a default data in the contact list and if I want to add/save additional data to the contact list, it will only save the data in the contact list after I edit what one of the data which was already in the contact list.
enter image description here
Below are the codes:
1. HTML:
<ion-view view-title="Dashboard">
<ion-content class="padding">
<div>
<form>
<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()" />
</form>
<table border='1',cellpadding='10',cellspacing ='0', width ='600'>
<tr>
<td Align = 'center'>Name</td>
<td Align = 'center'>Email</td>
<td Align = 'center'>Phone</td>
<td Align = 'center'>Action</td>
</tr>
<tr ng-repeat="contact in contacts">
<td Align = 'center'>{{ contact.name }}</td>
<td Align = 'center'>{{ contact.email }}</td>
<td Align = 'center'>{{ contact.phone }}</td>
<td Align = 'center'>
edit |
delete
</td>
</tr>
</table>
</div>
</ion-content>
</ion-view>
2.JS: (controller)
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope, ContactService) {
$scope.contacts = ContactService.list();
$scope.saveContact = function () {
ContactService.save($scope.newcontact);
$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));
}
})
(services)
angular.module('starter.services', [])
.service('ContactService',function() {
var uid = 1;
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;
}
});
codes credit to : https://viralpatel.net/blogs/angularjs-service-factory-tutorial/