Value in ng-model doesn't update

Question

I'm using this

<textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes"></textarea>

and from what I can understand ng-model="notes" means that the textarea is assigned whatever $scope.notes is. This works correctly, however whenever I edit the text in the textarea, isn't $scope.notes supposed to change as well?

When I use this button:

<button ng-click="saveNotes(notes)"></button> 

The value of "notes" is always the original $scope.notes value and not the updated value.

Can someone tell me why this is?

Thanks

Edited to include html code:

<ion-view ng-controller="LectureCtrl" id="userMessagesView" view-title="{{lecture.title}}">
  <ion-content>
    <div style="position: absolute; top: 20px; left: 30px; right: 60px;">
      <div style="height: 100%;">
        <iframe class="video" width="560" height="315" src="{{lecture.youtubeLink}}" frameborder="0" allowfullscreen></iframe>

        <textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes" ng-change="updatedNotes"></textarea>
      </div>
    </div>
  </ion-content>

  <button ng-click="saveNotes(notes)">
  </button>
<ion/view

Answer 1

Think of ng-model as a way to connect your controller variables to your HTML and vice versa. So if you set $scope.notes in your controller and your then use the curly brackets {{ notes }} in your html the variable content will show up in your html i.e.

Controller =>(bound to)=> your HTML ($scope.notes)

But it works both ways (2-way binding). So if you use ng-model in your HTML it will now take that content from the input field and set it to the variable in your controller. You don’t have to do anything as it is done in the background in Angular i.e. if you type in “Hello world” in your text area it is already updated to the variable in the controller. So you don’t need to pass it back with .

Controller <=(bound up to)<= HTML (ng-model="notes")

2-way binding has 3 parts (very simplified):

1. variable is set with $scope in controller. $scope.notes declares that any code or HTML within the controllers “umbrella” will have access to the variable.
2. connect the $scope variable to an HTML element with ng-model. Over simplified ng-model just says connect that $scope.notes variable to this element. I think it of it as a pipe between your HTML and ctrl and your don’t need to touch it as the variable content is flowing between the two managed by Angular
3. use {{}} to parse (bind) the variable out into the UI i.e. {{notes}} says show the contents of that variables

SIMPLE EXAMPLE OF 2WAY BINDING

  <input type="text" ng-model="first.greeting">
  <div ng-class="first.greeting">
    {{first.greeting}} {{"World"}}

  </div>

YOUR CODE // No eed to pass notes back it already is there in your ctrl

  // proof
    .controller('MyController', ['$scope', function($scope) {
         // if you set this up the string wills how up in your textarea
        $scope.notes = "Set notes two way binding";

       // click on notes and it will loot whatever you have entered into your input field
        $scope.saveNotes = function() {
            console.log('Lets check if notes is here', $scope.notes);
        }

    }])

     // Note if you set $scope.notes = "Set notes two way binding"; in your ctrl the  "Set notes two way binding" wills how up in your textbox
    <textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes"></textarea>

“Umbrella” $scope problem – $scope is not connected to its controller

Now if this already makes sense to you and you have it all setup and you are still experiencing problems then it is most likely you have a $scope problem i.e. the “pipeline” to your controller is disconnected. I think of this as moving from one area code to another i.e. you dial 555 every day and you fly to another state and then try to use 555 but is doesn’t work as the area code is 777. $scope.555 will only work with a controller that knows about 555. If you are a different state (controller) 555 means nothing and Angular in this case will “discard it”. It doesn’t actually discard it just assumes you are smart and dialing elsewhere that it doesn't currently know about (eg internationally) so it passes it along assuming that somewhere in the system something will know what to do with 555.

EXAMPLE OF SCOPE "DISCONNECT"

    .controller('ProductsController', ['$scope', function($scope) {
        $scope.product = "My product";

        $scope.saveProduct = function() {
            console.log('Lets check if product is here', $scope.product);
        }
    }])

    .controller('ReviewsController', ['$scope', function($scope) {

    }])

    <div ng-controller="ProductsController">
      /// lots of html stuff
    </div>
    <div ng-controller="ReviewsController">
            // Note: ProductsController is no longer managing the product variable. OtherStuffController now has "control" of all variables and it has no product variable
            // this seems logical but it happens all the time especially with large HTML or in my case template hell :) There are a number of tools to help with this debugging
            <textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="product"></textarea>
    </div>