ng-model on textarea doesn't work

Question

I'm having an issue using ng-model. When I look at the object, all the properties empty:

$scope.edit = {
            name: " ",
            gender: " ",
            major: " ",
            gpa: " ",
            act: " ",
            sat: " ",
            toefl: " ",
            primary: " ",
            secondary: " ",
            country: " ",
            summary: " ",
            past: " ",
            media: " "
        };

But when I click submit button all it returns are

In the html page

Code: https://plnkr.co/edit/HJlfFVjq0cZWJDCDXSXw?p=preview

Answer 1

From the plunker (although I couldn't run your code) what is quite obvious is that you are using the same controller PlayerController on two different occasions within your form.

What happens here is that the method updateUser() of the ng-click attribute is bound to a new instance of the controller PlayerController . Therefore creating a new scope , and totally unaware of what changes have been brought to its neighboring namesake controller's scope properties (in this case edit ).

<div ng-controller="PlayerController">
   <!-- ISOLATE region -->
   <textarea ng-model="edit.someproperty"></textarea>
</div>
<div ng-controller="PlayerController">
   <!-- Another isolate region unaware of the above -->
   <button ng-click="updateUser(edit)">Update</button>
</div>

Solution

Wrap the whole form of yours within one single ngController directive so that everything within that scope ( ngModel directives and the method updateUser ) use the same scope properties.

Simple Demo

Note: I've also noticed that you've wrapped the ngController s within a form which is incorrect. A form in AngularJS imposes a FormController controller object and that controller becomes the immediate parent of your controllers. In fact, the controller that you are creating with ngController is meant to handle the logic for your form and not other way round.