Remove blank option but do not set an initial option to the first value

Question

I want to get rid of an empty option generated in my select.

<option value="?" selected="selected"></option>

What I also want to do is NOT set the first element automatically. Basically once select is untouched the value should be empty but once user clicks on the select they cannot see that empty option in there. If unselected without selecting an option, select should remain empty.

So I don't want to end up with this http://jsfiddle.net/MTfRD/6518/

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

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

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

<div ng-controller="MyCtrl">
    <select ng-model='form.type' required 
        ng-options='option.value as option.name for option in typeOptions'>
    </select>
</div>

I have looked at tens of posts that suggest this answer but it doesn't solve my problem.

This is the desired behaviour

Answer 1

You can simply do a hack like this,

<div ng-controller="MyCtrl">
    <select ng-model='form.type' required ng-options='option.value as option.name for option in typeOptions'>
          <option value="" style="display: none"></option>
    </select>
</div>

DEMO

var myApp = angular.module('myApp',[]);


function MyCtrl($scope) {
    
    $scope.typeOptions = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
    ];
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <select ng-model='form.type' required ng-options='option.value as option.name for option in typeOptions'>
          <option value="" style="display: none"></option>
    </select>
</div>