Ng-model not updating after resetting textarea in AngularJS

Issue

I have been scratching my head over this problem for a while now. I have made a textarea and created a model with ng-model. This works all fine. I also have a button that uses plain Javascript for resetting the textarea. The binding stops working at that moment I click this button and I still can see my text in the other field, but the textarea is emtpy. I have recreated the problem here Fiddle.

window.onload = function () {
document.getElementById('btn').onclick = function () {
    document.getElementById('textarea').value = ""; 
};
}; 

Am I missing something here or is this not how binding works in Angular. When I start retyping it starts 'listening' again and displays the correct text.

Does somebody have a clue or encountered this problem before?

Thanks in advance.

Solution

Not sure why you don't use angular to reset your text area.

You can do a reset with ng-click="txt=''" with-out a function in your controller but it's better to do it like this ng-click="reset()".

For a demo see below and here at jsFiddle.

var app = angular.module('myApp', []);

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.txt='';
    
    $scope.reset = function() {
        $scope.txt = '';
    };
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<textarea id="textarea" ng-model="txt">
    
</textarea>

    <div>{{txt}}</div>

<!--<button id='btn' ng-click="txt=''">Reset textarea</button>-->
    <button id='btn' ng-click="reset()">Reset textarea</button>
</div>
  </div>

Answered By - AWolf