Angular select box with customizable and unselectable placeholder option

var app;

app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.defaultOption = 'Default option...'
  $scope.values = [
    {
      id: 0,
      label: 'Zero'
    }, {
      id: 1,
      label: 'One'
    }, {
      id: 2,
      label: 'Two'
    }, {
      id: 3,
      label: 'Three'
    }
  ];
  $scope.dogs = [
    {
      id: 0,
      label: 'German Shepard'
    }, {
      id: 1,
      label: 'Basset Hound'
    }, {
      id: 2,
      label: 'Chiahuahua'
    }, {
      id: 3,
      label: 'Mutt'
    }
  ];
  
  $scope.number = null;
  $scope.dog = null;
});

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));
    }
  };
})

app.directive('localize', function(){
  return function(input){
    return input + "2";
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.2/angular.js" data-semver="1.2.2"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h3>Default Placeholder Select Option</h3>
    <div>
      <select ng-model="number" ng-options="item.id as item.label for item in values"></select>
    </div>
    <h4>Selected Number: {{number}}</h4>
    
    <h3>Custom Placeholder Select Option</h3>
    <div>
      <select ng-model="dog" ng-options="dog.id as dog.label for dog in dogs" default-option="{{defaultOption}}"></select>
    </div>
    <h4>Favorite Dog ID: {{dog}}</h4>
  </body>

</html>

/* Put your css in here */

#Angular select box with customizable and unselectable placeholder option
-------------------

Using Angular's powerful directive system, you can extend basic html elements to 
behave more like the way you want them to. We're going to over-ride the basic
*<select>* element to add a configurable and unselectable placeholder option 
in our select boxes.