Angular select and ng-options

Question

I have this angular select:

<select ng-model='obj.status' ng-options='status.code as (status.code + " " + status.phrase) for status in status_codes.data track by status.code'>`

My $scope.status_codes is like this:

data: [
{
       "code":"100",
       "phrase":"...",
       "spec_title":"RFC7231#6.2",
       "spec_href":"http://tools.ietf.org/html/rfc7231#section-6.2"
}
...
]

My $scope.obj.status is updated to "300" or "100" or whatever as I change my select, but the select display is always blank. So, the model updates to the selected value of the select input but the input does not show the currently selected value, it shows a blank item.

If i change ng-options to be ng-options='status as (status.code ...' it works, but I only want status.code in my model, not the whole status array. What gives?

I have {{obj | json }} in my HTML and it reads:

obj = {
  "name": "",
  "description": "",
  "payload": "",
  "status": "200",
  "responseHeaders": {
    "entry": [
      {
        "key": "",
        "value": ""
      },
      {
        "key": "",
        "value": ""
      }
    ]
  }
}

Answer 1

Remove track by.

From the Docs:

Be careful when using select as and track by in the same expression.

My best guess is that the as uses a normal value, like "300", but the track by is using a typed value, like "int:300". Removing one or the other should do it, preferably the track by.

They are giving this as an example:

This will work:

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

but this will not work:

<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>