Here's my try at keeping it simple, making it declarative and not dependent on form tags or other stuff.
A simple directive:
.directive("myDirective", function(){
return {
scope: {
item: "=myDirective"
},
link: function($scope){
$scope.stateEnum = {
view: 0,
edit: 1
};
$scope.state = $scope.stateEnum.view;
$scope.edit = function(){
$scope.tmp1 = $scope.item.text;
$scope.tmp2 = $scope.item.description;
$scope.state = $scope.stateEnum.edit;
};
$scope.save = function(){
$scope.item.text = $scope.tmp1;
$scope.item.description = $scope.tmp2;
$scope.state = $scope.stateEnum.view;
};
$scope.cancel = function(){
$scope.state = $scope.stateEnum.view;
};
},
templateUrl: "viewTemplate.html"
};
})
viewTemplate.html:
<div>
<span ng-show="state == stateEnum.view" ng-click="edit()">{{item.text}}, {{item.description}}</span>
<div ng-show="state == stateEnum.edit"><input ng-model="tmp1" type="text"/> <input ng-model="tmp2" type="text"/><a href="javascript:void(0)" ng-click="save()">save</a> <a href="javascript:void(0)" ng-click="cancel()">cancel</a></div>
</div>
Then set the context (item):
<div ng-repeat="item in myItems">
<div my-directive="item"></div>
</div>
See it in action: http://plnkr.co/edit/VqoKQoIyhtYnge2hzrFk?p=preview