Update row in Angular JS - angularjs

Question

I am submiting a form using Angular JS and Web service. Here is code-
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="EmpName" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="EmpAge" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="EmpCity" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
I want to make these text boxes reusable on Edit i.e. on edit click corresponding rows item must be filled and the Save button should now be working like Update button.
How can I do it?
Alternatively How can I make row editable?

Answer 1

Ideally you would wanna create the models as
Employee.Name , Employee.Age , Employee.City
Now
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="Employee.Name" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="Employee.Age" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="Employee.City" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<button type="button" id="btnSubmit" ng-click="saveEmployee()">{{Employee.id ? "Edit" : "Create"}}</button>
</td>
</tr>
</table>
In the Controller
$scope.saveEmployee = function(){
if($scope.Employee.id){
// Id will be present for a existing employee
// update the Employee
}else {
// Id not present
// create the employee
}
}
I would have an Employee.save() in the model which can identify weather to save or update the Employee