title: How to clear the value in an md-select
body: <p>I'm wanting to have an md-select that the user can clear the selected value. E.g. they select a value but decide they want to clear their selection.</p>
  
  <p>The behavior of md-select is to select the first entry in the options. I'd like to make it return to the state where no selection was made.</p>
  
  <p>I'm imagining I probably need a custom directive for this, so I've implemented a simple directive which listens to the keydown for the DELETE key.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div ng-controller="AppCtrl as ctrl" class="md-padding selectdemoBasicUsage" ng-cloak="" ng-app="MyApp"&gt;
    &lt;div&gt;
      &lt;h1 class="md-title"&gt;Select a state&lt;/h1&gt;
      &lt;span&gt;I want the DELETE key to be able to clear the selected state.&lt;/span&gt;
      &lt;div layout="row"&gt;
  
        &lt;md-input-container&gt;
          &lt;label&gt;State&lt;/label&gt;
          &lt;md-select ng-model="ctrl.userState" select-clear&gt;
            &lt;md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}"&gt;
              {{state.abbrev}}
            &lt;/md-option&gt;
          &lt;/md-select&gt;
        &lt;/md-input-container&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>(function () {
    'use strict';
    angular
        .module('MyApp',['ngMaterial', 'ngMessages'])
        .controller('AppCtrl', function() {
          this.userState = '';
          this.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' +
              'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' +
              'WY').split(' ').map(function (state) { return { abbrev: state }; });
        })
    .directive('selectClear', function() {
      return {
          restrict: 'A',
          require: 'ngModel',
  
          link : function(scope, iElement, iAttrs, ngModelCtrl) {
              iElement.bind('keydown', function(event) {
                  if (event.keyCode === 46) {
                      ngModelCtrl.$setViewValue('', event);
                  }
              })
          }        
      }    
    });
  })();
  </code></pre>
  
  <p>Here's my code pen:</p>
  
  <p><a href="http://codepen.io/craigsh/pen/GorpVV" rel="noreferrer">http://codepen.io/craigsh/pen/GorpVV</a></p>
  
  <p>But it doesn't work - when the DELETE key is pressed the first options value is selected.</p>