Here is a simple example illustrating my issue: JSFiddle.
Initially, I have an empty/default option, but when I select something else from the drop-down, this default option disappears.
How can I keep this default option visible after making a selection?
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
ng-options="option.name for option in data.availableOptions"
ng-model="data.selectedOption"></select>
Angular-controller:
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
],
selectedOption: {id: '2', name: 'Option B'} //This sets the default value of the select in the UI
};
I attempted to use ng-init to set the default option to null, but unfortunately, it didn't work as expected.