First Angular Example

markup.html

<div ng-controller="index">
  <table>
	  <thead>
		  <tr>
			  <td>Id</td>
			  <td>Name</td>
			  <td></td>
		  </tr>
	  </thead>
	  <tbody>
	    <tr ng-repeat="product in products">
	        <td>{{product.id}}</td>
	        <td>{{product.name}}</td>
	        <td><button ng-click="editThisItem(product)">Edit</button></td>
	    </tr>
	  </tbody>
  </table>
  
  <hr />
  
  <input type="text" ng-model="item.name" />
  <button ng-if="! editing" ng-click="newItem()">New Item</button>
  <button ng-if="editing" ng-click="editItem()">Save Item</button>
</div>

root.js

angular.module("root", [])
	.controller("index", ["$scope", function($scope) {
		$scope.products = [
			{id: 1, name: "Hockey puck"},
			{id: 2, name: "Golf club"},
			{id: 3, name: "Baseball bat"},
			{id: 4, name: "Lacrosse stick"}
		];
		
		$scope.item = {};
		
		$scope.nextId = function() {
		    return $scope.products[$scope.products.length - 1].id + 1;
		};
		
		$scope.newItem = function() {
		    debugger;
		    $scope.item.id = $scope.nextId();
		    $scope.products.push($scope.item);
		    $scope.item = {};
		};
		
		$scope.editThisItem = function(_item) {
		    debugger;
		    $scope.editing = true;
		    
		    angular.copy(_item, $scope.item);
		    $scope.item.index = $scope.products.indexOf(_item);
		};
		
		$scope.editItem = function() {
		    debugger;
		    angular.copy($scope.item, $scope.products[$scope.item.index]);
		    $scope.item = {};
		    
		    $scope.editing = false;
		};
		
		$scope.editing = false;
	}
]);