Default Option disappears after select non-empty option

Question

I have simple example of my problem JSFiddle .

At start I have empty/default option, but when I choose something else from drop-down, this option disappears.

How can I left this option after select?

 <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've tried to use ng-init to set default option to null but this doen't work

Answer 1

Please add empty option element inside select element and check.

 <select name="mySelect" id="mySelect"
  ng-options="option.name for option in data.availableOptions"
  ng-model="data.selectedOption">
    <option></option>
  </select>

Answer 2

Use this approach:

HTML

<div ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.id as option.name for option in data.availableOptions"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

AngulerJS

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
    selectedOption: '2' //This sets the default value of the select in the ui
    };

}]);