How to change the current value of a select list bound with ng-options?

Question

I have a select list created like this:

    <div class="actionList" ng-repeat="selectedAction in outputDevice.selectedActions">
      <select class="outputAction" ng-model="selectedAction.value" ng-options="action as action.name for action in outputDevice.userDevice.baseDevice.outputs">
        <option value="">
          Select Action
        </option>
      </select>
    </div>

It is contained within a create/edit page. When the page is in edit mode, I want to chose which item in the list is selected, based on some values retrieved from the server. Currently the select list will populate with the correct options, but I can't make the select list start on the correct value. Here is the code where I populate the values on the page:

             for(var i =1; i<result.length; i++){
                var appyDevice = result[i];
                var userDevice = appyDevice.device;
                var selectedActions;

                if(appyDevice.outputs){
                    selectedActions = appyDevice.outputs;
                    for(var j =0; j<selectedActions.length; j++){
                        selectedActions[j].value = {
                            name: selectedActions[j].name,
                            id: selectedActions[j].id
                        };
                    }
                    $ctrlScope.outputDevices.push({
                        userDevice: userDevice, 
                        selectedActions: selectedActions
                    });
                }
            }
            $ctrlScope.$apply();

I set selectedActions[j].value, which the select list is bound to, however it does not update. Any ideas why this isn't working? Or other ways to do this?

EDIT: Here is a sample of the results JSON (ignore the redundant information and stuff, we're working on the serialization still):

[
   {
      "user":{
         "id":1,
         "username":"asdf",
         "email":"asdf"
      },
      "id":1,
      "name":"SuperAppy",
      "description":"some super duper descriptioon "
   },
   {
      "appy":{
         "user":{
            "id":1,
            "username":"asdf",
            "email":"asdf"
         },
         "id":1,
         "name":"SuperAppy",
         "description":"some super duper descriptioon "
      },
      "inputs":[
         {
            "id":1,
            "name":"Shake"
         }
      ],
      "outputs":[
         {
            "id":1,
            "name":"TurnOn"
         }
      ],
      "device":{
         "user":{
            "id":1,
            "username":"asdf",
            "email":"asdfm995@gmail.com"
         },
         "baseDevice":{
            "inputs":[
               {
                  "id":1,
                  "name":"Shake"
               },
               {
                  "id":2,
                  "name":"Slide"
               }
            ],
            "outputs":[
               {
                  "id":1,
                  "name":"TurnOn"
               },
               {
                  "id":2,
                  "name":"TurnOf"
               }
            ],
            "id":1,
            "name":"iPhone5",
            "osVersion":5.0,
            "appVersion":0.0
         },
         "id":1
      },
      "id":1
   },
   {
      "appy":{
         "user":{
            "id":1,
            "username":"asdf",
            "email":"asdfm995@gmail.com"
         },
         "id":1,
         "name":"SuperAppy",
         "description":"some super duper descriptioon "
      },
      "inputs":[
         {
            "id":1,
            "name":"Shake"
         },
         {
            "id":2,
            "name":"Slide"
         }
      ],
      "outputs":[
         {
            "id":2,
            "name":"TurnOf"
         }
      ],
      "device":{
         "user":{
            "id":1,
            "username":"asdf",
            "email":"asdfm995@gmail.com"
         },
         "baseDevice":{
            "inputs":[
               {
                  "id":1,
                  "name":"Shake"
               },
               {
                  "id":2,
                  "name":"Slide"
               }
            ],
            "outputs":[
               {
                  "id":1,
                  "name":"TurnOn"
               },
               {
                  "id":2,
                  "name":"TurnOf"
               }
            ],
            "id":3,
            "name":"GalaxyS3",
            "osVersion":5.0,
            "appVersion":0.0
         },
         "id":3
      },
      "id":2
   }
]

Edit 2: As per the possible duplicate linked in the comments, I attempted to add an ng-init to no avail:

<select class="inputAction" ng-model="selectedAction.value" ng-options="action as action.name for action in inputDevice.userDevice.baseDevice.inputs" ng-init="selectedAction.value=selectedAction.name">

I think this is irrelevant anyways, as I am effectively doing this initialization in the following lines of my code:

                        selectedActions[j].value = {
                            name: selectedActions[j].name,
                            id: selectedActions[j].id
                        };

have you tried [ng-selected](http://docs.angularjs.org/api/ng.directive:ngSelected) ? — mb21, Jun 29 '13 at 18:07
It seems like since my select options are generated by angular, I would have to go in after the fact and modify the DOM to add that, which seems to go contrary to angular design principals. — GBleaney, Jun 29 '13 at 18:10
I built a fiddle with your code: http://jsfiddle.net/EyLVc/1/ and fixed `outputDevice` to a consistent `outputDevices`. But with that JSON, even the first expression `outputDevices.selectedActions` cannot evaluate to an array or a list of properties. I'm sorry, but there's just too much broken with your code. — mb21, Jun 29 '13 at 19:23
possible duplicate of [How to make a preselection for a select list generated by AngularJS?](http://stackoverflow.com/questions/14297560/how-to-make-a-preselection-for-a-select-list-generated-by-angularjs) — Stewie, Jun 29 '13 at 20:04
mb21 - I'm not sure what you think is broken, my code runs and populates the selects, the default value just isnt set. Perhaps my code samples here arent detailed enough? — GBleaney, Jun 29 '13 at 21:51
Stewie - thanks for finding that. At first glance, that seems to be what I'm looking for, however their solution isn't working for me for some reason — GBleaney, Jun 29 '13 at 21:52

score 1 · Accepted Answer · answered Jun 30 '13 at 09:44

1

I've modified mb21's fiddle to get your code working and demonstrate initializing the values.

http://jsfiddle.net/GCrU3/

The issue is, when you use ng-model on the select and ng-options for the options, you must set the ng-model variable to the exact reference of the object that is being used to generate that option:

    for(var j =0; j<selectedActions.length; j++){
        selectedActions[j].value = userDevice.baseDevice.outputs[0];  // change index to select different initial value
    }

answered Jun 30 '13 at 09:44

Karen Zilles

7,633
3
34
33

Also, consider not jamming different types of objects into the same array (top level of your json). How about returning an object with a user property and a devices property (or whatever they're supposed to be)? – Karen Zilles Jun 30 '13 at 09:51
Agreed. As I mentioned in my post, the serialization is awe full right now, I'll keep that in mind as I try to clean it up. – GBleaney Jun 30 '13 at 18:48

How to change the current value of a select list bound with ng-options?

1 Answers1