Edit Example

HTML

<!DOCTYPE html>
<div ng-app ng-controller="myCtrl" class="container">
        <table>
        <tr ng-repeat="item in items">
            <td>
                <span ng-hide="item.editing">{{item.name}} <button  ng-click="editItem(item)">Edit</button></span>
                <input ng-show="item.editing" ng-model="item.name"  autofocus />
                <button ng-show="item.editing" ng-click="doneEditing(item)">Save</button>
                 <button ng-show="item.editing" ng-click="Cancel(item)">Cancel</button>
            </td>
        </tr>
        </table>
        
        {{items}}
</div>

CSS

.container {
    margin-top:10px;
    font-family:arial;
}
input:focus {
    //change more attributes, if you want.
}
input {
    border:none;
    background-color:transparent;
}
.container header {
    padding-bottom:20px;
    border-bottom:1px solid black;
}
ul, input, .container {
    padding:10px;
}

JavaScript

function myCtrl($scope) {

    $scope.items = [{
        name: "item #1",
        editing: false
    }, {
        name: "item #2",
        editing: false
    }, {
        name: "item #3",
        editing: false
    }];

    $scope.editItem = function (item) {
        item.editing = true;
        item.backupName = angular.copy(item.name);
    }

    $scope.doneEditing = function (item) {
        item.editing = false;
        delete item.backupName;
        //dong some background ajax calling for persistence...
    };
    $scope.Cancel = function (item) {
        item.editing = false;
        item.name = angular.copy(item.backupName);
        delete item.backupName;
    };
}