We can do this easy by using angular's powerful directive system to extend basic html.

app.directive('select', function($interpolate) { return { restrict: 'E', require: 'ngModel', link: function(scope, elem, attrs, ctrl) { var defaultOptionTemplate; scope.defaultOptionText = attrs.defaultOption || 'Select...'; defaultOptionTemplate = '<option value="" disabled selected style="display: none;">{{defaultOptionText}}</option>'; elem.prepend($interpolate(defaultOptionTemplate)(scope)); } }; });

With this, we can now do the following:

<select ng-model="number" ng-options="item.id as item.label for item in values"> </select>

This will create a select box with an unselectable placeholder that says "Select..."

If we want a custom placeholder we can simply do this:

<select ng-model="dog" ng-options="dog.id as dog.label for dog in dogs" default-option="What's your favorite dog?"> </select>

This will create a select box with an unselectable placeholder that says "What's your favorite dog?"

Plunker Example (in coffeescript): http://plnkr.co/edit/zIs0W7AdYnHnuV21UbwK

Plunker Example (in javascript): http://plnkr.co/edit/6VNJ8GUWK50etjUAFfey