AngularJS - setting selected value of dropdown does not work

Question

I made a fiddle replicating my problem here: http://jsfiddle.net/U3pVM/2840/

As the title suggests, I can't set the selected value of a select populated using ng-options.

I have searched and tried all possible solutions that I found. Any help or suggestions would be appreciated!

HTML

<div ng-app>
    <h2>Todo</h2>
    <div ng-controller="TodoCtrl">
        <select ng-model="ddlRooms" ng-options="r.id as r.Name for r in Rooms">
        </select>
        {{$scope.test}}
    </div>
</div>

Angular

function TodoCtrl($scope) {
    $scope.Rooms = [{ Name: 'Toddler', id: 1 },{ Name: 'other', id: 2 }];
    $scope.options = [{ Name: 'other', id: 2 }];
    $scope.ddlRooms = $scope.options[0];

    $scope.test = 'bla';
}

AlwaysALearner · Accepted Answer · 2014-02-04 07:00:00Z

16

Because you are doing id as name you need to assign id to the model:

$scope.ddlRooms = $scope.options[0].id;

answered Feb 4, 2014 at 7:00

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

OverMars Over a year ago

That did it! Thank you very much! Any insights as to why? I'm assuming its because Angular binds to the value..

Akhilesh Kumar Over a year ago

How to solve it if my select tag is like: <select ng-model="formA.ddlRooms" ng-options="r.id as r.Name for r in Rooms">

Will Sadler · Accepted Answer · 2015-08-19 15:16:07Z

6

better to do:

<select ng-model="ddlRooms.id" ng-options="r.id as r.Name for r in Rooms">

answered Aug 19, 2015 at 15:16

Will Sadler

1431 silver badge4 bronze badges

Collectives™ on Stack Overflow

AngularJS - setting selected value of dropdown does not work

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related