unable to remove blank option with ng-options

Question

I have a problem with ng-options . I can't get rid of the blank option in my ng-options select.

I've got 2 select objects, both with an ng-options . The displayed options of the second select is based on the first one. When I change the options of the first select, the second one initially displays a blank option.

I tried several solutions but can't fix it.

my object:

$scope.mySpecs = {  
    "1": {
        "name": "Name 1",
        "options": {
            "1": "option 1",
            "2": "option 2",
            "3": "option 3"
        }
    },
    "5": {
        "name": "Name 5",
        "options": {
            "6": "option 6",
            "7": "option 7",
            "8": "option 8"
        }
    }
};

and my two selects:

<select ng-model="selectedSpecs.name" ng-options="k as v.name for (k, v) in mySpecs" ng-change="setVals()">
    </select>

    <select ng-model="selectedSpecs.option" ng-options="k as v for (k, v) in mySpecs[selectedSpecs.name].options"></select> 

Here is a fiddle:

https://jsfiddle.net/byvpx7mn/3/

Thanks for your help!

Answer 1

You can do one thing use Object.keys and choose the 0th key.

$scope.selectedSpecs.name = Object.keys($scope.mySpecs)[0];

And if you don't want null in second select set first option to fault.

<option value="" ng-if="false"></option>

Fiddle