How to select first item as default in Angular JS dropdown?

Question

I'm trying to use a dropdown, but I'm not able to select 1st value as selected by default. It showing blank. master_data.sch_files has 4 items, but it shows 5 in dropdown in which 1st time is blank.

<select ng-init="item.file_range_unit = master_data.sch_files[0].ref_key" ng-model="item.file_range_unit"
                        ng-options="x.ref_key as x.ref_value for x in master_data.sch_files" required style="height: 33px;
                       width: 140px; padding-left:5px">
                  </select>

@aditya posted the answer first and u just copied the same answer from the link — Vivek Nuna, Jun 10 '17 at 13:35
@hasan for your reference https://stackoverflow.com/a/12654812/6527049 — Vivek Nuna, Jun 10 '17 at 13:36

hasan · Answer 1 · 2017-06-07T21:27:53.090

You can use this $scope.form = {type : $scope.typeOptions[0].value}; to select first element of option data.

Also this works here

function MyCtrl($scope) {

    // your option data
    $scope.typeOptions = [
       { name: 'Feature', value: 'feature' }, 
       { name: 'Bug', value: 'bug' }, 
       { name: 'Enhancement', value: 'enhancement' }
    ];

    $scope.form = {type : $scope.typeOptions[0].value};
}

score 0 · Accepted Answer · answered Jun 07 '17 at 20:42

Reference: Why does AngularJS include an empty option in select?

The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own.

In short: the empty option means that no valid model is selected (by valid I mean: from the set of options). You need to select a valid model value to get rid of this empty option.

All you need to do is to give a default value to:

item.file_range_unit

How to select first item as default in Angular JS dropdown?

2 Answers2