How to update view when scope does not change - angularjs

Question

there is a textarea to input. And two buttons to click.
`<textarea ng-bind="msg"></textarea>
<div class="cancel-btn" ng-click="is_hide=false;"></div>
<div class="submit-btn" ng-click="submit_card()"></div>`
What is the process ?
input some characters in textarea, then click 'submit-btn', scope will save the 'msg'. But if click 'cancel-btn', scope won't save the msg.
What do I want ?
After I save msg, then input and click 'cancel-btn', I want to the textarea's innerHTML is scope.msg instead of input.
#
Now, I want to exec $scope.$apply() to update dom, but alert error $digest already in progress.
#
Maybe I need ng-model the textarea, and use the other param saved_msgsave the msg, when click 'cancel-btn', make the msg = saved_msg. But, there are some convenient ways ?
-------------------update 6/25-----------------
`<div ng-controller="Ctrl">
<div ng-class="{'selted':cid == 0}" data-cat="0"></div>
<div ng-class="{'selted':cid == 1}" data-cat="1"></div>
<div ng-class="{'selted':cid == 2}" data-cat="2"></div>
<textarea ng-bind="msg"></textarea>
<div class="cancel-btn" ng-click="is_hide=false;"></div>
<div class="submit-btn" ng-click="submit_card()"></div>
</div>
In fact, I use some directive byjQuery` to change the dom class, when click 'cancel-btn', I want to refresh the dom decide to scope.
It may be similar to $render.
--------------------update 6/26--------------
Thank for your help. I find a way to solve the problem.I add a div#main to contain what I want to save/refresh. ps: care for some change!
The follow is my way. Maybe you have better way, welcome to share!
`<div ng-controller="Ctrl">
<div id="main">
<div ng-class="{'selted':cid == 0}" data-cat="0" selt></div>
<div ng-class="{'selted':cid == 1}" data-cat="1" selt></div>
<div ng-class="{'selted':cid == 2}" data-cat="2" selt></div>
<textarea ng-bind="msg" id="msg"></textarea>
</div>
<div class="cancel-btn" ng-click="reset()"></div>
<div class="submit-btn" ng-click="submit_card()"></div>
</div>`
In controller,
`app.controller('Ctrl', ['$scope', '$compile', function($scope, $compile) {
$scope.reset = function(){ //reset depend on scope
$('#main div').removeClass('selted');
//the dom maybe change, need clear 'selted' class first
//compile(dom)(scope)
$('#main').html($compile($('#main').html())($scope));
}
$scope.save = function(){ //save the scope
$scope.msg = $('#msg').val();
$scope.cid = $('.selted').index()+1;
}
}]);
app.directive('selt', function(){
//this is directive, only change class on dom
return function(scope,ele){
ele.click(function(){
ele.addClass('selted').siblings().removeClass('selted');
})
}
});
`

Answer 1

1 - You need to replace ng-bind of your textarea with ng-model, to update the scope while you are typing on it.
2 - To provide a cancel like that, in a simple manner, replace the ng-click content with a function, like cancel(formName). In your controller:
angular.module('exampleApp', [])
.controller('Ctrl', ['$scope', function ($scope) {
$scope.is_hide = false;
$scope.msg = null;
$scope.cancel = function cancel (form) {
$scope.is_hide = true;
$scope.msg = null;
if (form) {
form.$setPristine();
}
};
}]);
The formName argument is the name of the wrapper form element that you're using on your HTML, to access some specific properties, like $setPristine, which will reset the form processing to its initial state. NOTE: This doesn't mean that the fields values will be reseted.