ngModel data binding is not working properly - angularjs

Question

I am using ngSwitch directive to switch the view to Edit the div content. HTML is as follows -
<div ng-switch="isEditing" ng-controller="descController">
<div ng-switch-when="true">
<textarea name="Name" rows="8" class="form-control" ng-model="desc"></textarea>
<button class="btn btn-primary" ng-click="saveEdit($parent)">Save</button>
<button class="btn btn-warning" ng-click="cancelEdit($parent);">Cancel</button>
</div>
<div ng-switch-default>
<p class="lead" >{{desc}}</p>
<p><button class="btn btn-mini btn-danger" ng-click="$parent.isEditing = true;">Edit</button></p>
</div>
</div>
The controller code is as follows
home.controller("descController", function($scope, Desc){
(function getAboutMe(){
Desc.getAboutMe().success(function(about){
$scope.desc = about[0].description;
$scope.actualText = about[0].description;
$scope.saveEdit = function($parent){
//$scope.desc = $scope.desc;
$parent.isEditing = false;
}
$scope.cancelEdit = function($parent){
$scope.desc = $scope.actualText;
$parent.isEditing = false;
};
}).error(function(err){
alert(err);
});
})();
});
What I am trying to do is, when the cancel button is pressed I want the original text to be visible on the div and when the save button is clicked I want the new text to be visible on the div. How can i achieve this? I am new to Angular.

Answer 1

Do you need something like this?
$scope.saveEdit = function($parent){
$scope.actualText = $scope.desc; //update actualText before switching to view mode
$parent.isEditing = false;
}
$scope.cancelEdit = function($parent){
$scope.desc = $scope.actualText; //restore des
$parent.isEditing = false;
};
The main problem is ng-switch creates a new scope. Therefore you need to bind to the parent scope in your textarea using $parent:
<textarea name="Name" rows="8" class="form-control" ng-model="$parent.desc"></textarea>
DEMO