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
– Michael Kang, Commented Jul 14, 2014 at 8:14

Community · Accepted Answer · 2017-05-23 10:27:20Z

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.

CommunityBot

11 silver badge

answered Dec 17, 2015 at 8:25

Riegus

313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

V31 · Accepted Answer · 2014-07-14 08:15:14Z

2

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);
    }
}

answered Jul 14, 2014 at 8:15

V31

7,6643 gold badges28 silver badges44 bronze badges