Why ng-model does not update controller value select?

Question

This is the code HTML:

<div ng-controller="SelectCtrl">
    <p>selected item is : {{selectedItem}}</p>
    <p> age of selected item is : {{selectedItem.age}} </p>
    <select ng-model="selectedItem" ng-options="item.name for item in items">
    </select>
</div>

This is the code AngularJS:

var app = angular.module('myApp', []);

app.controller('SelectCtrl', function($scope) {
    $scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
    $scope.selectedItem = $scope.items[0];
    console.log($scope.selectedItem); //it's not update :(
});

in the view the new value updated every time I change the select, but the controller does not update the current value of the select. What should I do?

Thanks!

Solution 1

To get updated or change value inside your controller, you could write ng-change function on it. Then you could check the updated value inside controller.

Markup

<select ng-model="selectedItem" ng-options="item.name for item in items"
  ng-change="changeSelectedItem()">
</select>

Code

$scope.changeSelectedItem = function(){
   console.log($scope.selectedItem);
}

Other way could be you could simply use {{selectedItem}} on html somewhere. That will also give an idea about how selectedItem value is updating.

Solution 2

Because you are always taking the first item of the array in the controller,

$scope.selectedItem = $scope.items[0];
console.log($scope.selectedItem);

Just change your JS like this,

$scope.changeSelectedItem = function(){
   console.log($scope.selectedItem);
}

And the View use the ng-change to get the selected item

<select ng-model="selectedItem" ng-options="item.name for item in items"
  ng-change="changeSelectedItem()">
</select>

Comments

[Sajeetharan]

hmm true it happens :)

[Pankaj Parkar]

@VirajNalawade You should go for it..Thanks for appreciation.. :)

[Sajeetharan]

@alvarezsh please mark as an answer if it has helped