How to show up the first element for a select tag in angular?

Question

I have the following markup in order to create a select menu.

My model, devices, contains 3 object (ex: pc1, pc2, pc3).

When select is rendered I can see the list (collapsed) which has an empty value. When expanding the list I see the an empty line as first object and after my 3 objects.

My question, how to display the first element by default?

    <select data-ng-model="devices"
                name="devices"
                data-ng-required="true"
                data-ng-options="device.name for device in devices"></select>

EDIT:

Html emitted by angular is

<option value="?" selected="selected"></option>
<option value="0">pc1</option>
<option value="1">pc2</option>
<option value="2">pc3</option>

maybe related http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select — GibboK, Jul 15 '14 at 08:26
possible duplicate of [How do I set default value of select box in angularjs](http://stackoverflow.com/questions/18380951/how-do-i-set-default-value-of-select-box-in-angularjs) — GillesC, Jul 15 '14 at 08:27

score 1 · Answer 1 · answered Jul 15 '14 at 08:35

You cannot put same name for devices array and same for ng-model. Suppose use other name for ng-model say selectedDevice

HTML:

<select 
    data-ng-model="selectedDevice"
    name="devices" 
    data-ng-required="true"
    data-ng-options="device.name for device in devices">
</select>

JS:

$scope.devices = [
    { name: "pc1" }, 
    { name: "pc2" },
    { name: "pc3" }
];

$scope.selectedDevice = $scope.devices[0];

DEMO: http://jsfiddle.net/GFF6P/

How to show up the first element for a select tag in angular?

1 Answers1