Ng-Model Does Not Update Controller Value

Ng-model does not update controller value

Controller as version (recommended)

Here the template

<div ng-app="example" ng-controller="myController as $ctrl">
    <input type="text" ng-model="$ctrl.searchText" />
    <button ng-click="$ctrl.check()">Check!</button>
    {{ $ctrl.searchText }}
</div>

The JS

angular.module('example', [])
  .controller('myController', function() {
    var vm = this;
    vm.check = function () {
      console.log(vm.searchText);
    };
  });

An example: http://codepen.io/Damax/pen/rjawoO

The best will be to use component with Angular 2.x or Angular 1.5 or upper

########

Old way (NOT recommended)

This is NOT recommended because a string is a primitive, highly recommended to use an object instead

Try this in your markup

<input type="text" ng-model="searchText" />
<button ng-click="check(searchText)">Check!</button>
{{ searchText }}

and this in your controller

$scope.check = function (searchText) {
    console.log(searchText);
}

Angularjs ng-model in input does not update value in controller

You're setting $scope.inputvalue = ""; before the console.log. But after you change the value, you need to console.log it again.
Try using:

function checkiftoomuch($scope){
    $scope.inputvalue = "";
    console.log($scope.inputvalue);

    $scope.$watch('inputvalue', function(newValue, oldValue){
        console.log(newValue);
    })
}

Or add a function on your button click like:

<div class="form-group">
    <button class="btn btn-default" ng-click="showValue()>Check If Too Much</button>
</div>

And in JS:

function checkiftoomuch($scope){
    $scope.inputvalue = "";
    console.log($scope.inputvalue);

    $scope.showValue = function(){
        console.log($scope.inputvalue);
    }
}

AngularJS has 2-way data binding which means, the values in the view and controller are in sync always, they do not have to be passed back and forth.

ng-model not updating when value changes

This is because you are using ng-value="form_data.to_date || form_data.from_date | date: 'yyyy-MM-dd'" i.e. if form_data.to_date exists then assign it, if not then assign form_data.from_date but it won't update the value of ng-model.

To do this you can modify your code like this:

    angular.module('myApp', [])     .controller('myController', function ($scope) {        $scope.form_data = {          from_date: '',          to_date: ''        };        $scope.f = function () {          setTimeout(function () { // delay to show that to_date is not updating            if ($scope.form_data.to_date == "") {              $scope.form_data.to_date = $scope.form_data.from_date;            }            console.log($scope.form_data);            $scope.$apply();          })        }    });    angular.element(document).ready(() => { angular.bootstrap(document, ['myApp']); });   

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script><div ng-controller="myController">    <form name="myForm">        <input type="date" ng-model="form_data.from_date" name="from_date" ng-change="f()" required />        <input type="date" ng-model="form_data.to_date" name="to_date"            ng-value="form_data.from_date | date: 'yyyy-MM-dd'" required />        <p>Form invalid: {{myForm.$invalid}}</p> <!-- Should be false when first date is changed -->    </form></div>

angularJS ng-model not updating values in controller

Well since you have not given any information where the data is to be stored... I'm using localStorage

Fiddle : http://jsfiddle.net/NfPcH/23699/

Using localStorage is not a good practice... But basically solves your problem...

ng-value does not update Ng-model

To answer your question, "ng-value does not update Ng-model", it is by design. As mentioned in comments, ng-value and ng-model are not intended to by used in this way.

It isn't entirely clear what you are trying to achieve here, so here's a couple potential solutions:

If you are just looking to display a value then you don't need to use an input at all. Both of these will behave the same and update when needed:

<span>{{subOrderList.sum('Quantity')}}</span>

<span ng-bind="subOrderList.sum('Quantity')"></span>

If you actually need this value to be updated by user input then the HTML would look like this:

<input ng-model="Order.Quantity" type="number">

And then you will need to manually update that value in a controller or service when needed:

Order.Quantity = subOrderList.sum('Quantity');

From your comments it almost seems like you need an input that also changes dynamically and sporadically, but without a data example or more code I can't really see how that would work.

Value in ng-model doesn't update

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>

AngularJS: Model not updating in controller scope

If you use ng-model, you have to have a dot in there .

Bind model by creating a object like this

controller

$scope.form={
   foo:0
};

view

<input type="text" ng-model="form.foo" />

---

Related Topics