Unable to update value of Select from AngularJs

Question

I am unable to update value of select from AngularJs.

Here is my code

      <select ng-model="family.grade" >
         <option ng-repeat="option in options" value='{{option.id}}'>{{option.text}}</option>
      </select>

Here are the options which i am using to populate my select

var options = [{text:'Pre-K',id:'Pre-K'}, 
        {text:'K',id:'K'}, 
        {text:'1',id:'1'}, 
        {text:'2',id:'2'}, 
        {text:'3',id:'3'}, 
        {text:'4',id:'4'}, 
        {text:'5',id:'5'}, 
        {text:'6',id:'6'}, 
        {text:'7',id:'7'}, 
        {text:'8',id:'8'}, 
        {text:'+',id:'+'}];

Here is mu js code.

$scope.$watch("family_member.date_of_birth" ,function(newValue, oldValue){
    $scope.family.grade = "1" 
})

When ever value of family_member.date_of_birth changes it should set they value of select to 1. But this change is not visible on UI.

possible duplicate of [Working with select using Angular's ng-options](http://stackoverflow.com/questions/13047923/working-with-select-using-angulars-ng-options) — Julien, Jun 02 '14 at 09:15
I am unable to update it from javascript. Thats my main problem. — Ahmad.Masood, Jun 02 '14 at 09:20

score 1 · Accepted Answer · answered Jun 02 '14 at 09:21

You should use ngSelected to select the option.

it could be something like this:

<select ng-model="family.grade" >
    <option ng-repeat="option in options" 
        value='{{option.id}}' ng-selected="family.grade==option.id">
            {{option.text}}</option>
</select>

Hope this helps.

score 0 · Answer 2 · answered Jun 02 '14 at 09:15

I think you are looking for the track by clause of ng-options:

<option ng-repeat="option in options track by option.id">{{option.text}}</option>

However, you will still need to supply an object with an id property to set:

$scope.$watch("family_member.date_of_birth" ,function(newValue, oldValue){
    $scope.family.grade = { id: "1" } 
})

score 0 · Answer 3 · answered Jun 02 '14 at 09:31

The options array indiviual elements are objects. So the respective ng-model also need to be an object. So even when it is being changed in js, the respective object has to be provided rather than a string. Sample demo: http://plnkr.co/edit/naYcnID29SPa90co0leB?p=preview

HTML: JS: var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

 $scope.options = [{text:'Pre-K',id:'Pre-K'}, 
        {text:'K',id:'K'}, 
        {text:'1',id:'1'}, 
        {text:'2',id:'2'}, 
        {text:'3',id:'3'}, 
        {text:'4',id:'4'}, 
        {text:'5',id:'5'}, 
        {text:'6',id:'6'}, 
        {text:'7',id:'7'}, 
        {text:'8',id:'8'}, 
        {text:'+',id:'+'}];
  $scope.family = {};
  $scope.family_member = {
    date_of_birth: '10-Jan-1986'
  };
  $scope.$watch("family_member.date_of_birth", function(newValue, oldValue) {
    $scope.family.grade = $scope.options[2];
  });
});

Unable to update value of Select from AngularJs

3 Answers3