Why is my AngularJS textarea not binding to my variable?

Question

My HTML is as follows:

<textarea ng-model="cancelMessage"></textarea>
<span {{100 - cancelMessage.length}} characters remaining</span>

In my controller I declare a variable as follows:

$scope.cancelMessage = '';

When I type in the text area, the number of characters remaining actually updates. However, when I try to access

$scope.cancelMessage

(via ng-click), the variable is still '' and not the text in the text area.

Could be a scope issue, can you include the HTML that includes the ng-click? — Michael Kang, Jul 14 '14 at 08:14

score 3 · Answer 1 · edited May 23 '17 at 10:27

3

Had the same problem and this solved the problem for me:

Basically Angular created a new scope. Use $parent.cancelMessage in your textarea ng-model attrbibute instead.

edited May 23 '17 at 10:27

Community

answered Dec 17 '15 at 08:25

Riegus

score 2 · Answer 2 · answered Jul 14 '14 at 08:15

Created a fiddle for the problem. Hope you get an idea where you making the mistake.

Here is the controller function:

function test($scope){
    $scope.cancelMessage = '';
    $scope.clickTest = function(){
        alert($scope.cancelMessage);
    }
}

2 Answers2