title: Select the blank option of select box programmatically in AngularJS directive
body: <p>I have a select box with a blank option and some other options. The options are not generated with ngOptions directive, because they are generated on server side (with Symfony forms).</p>
  
  <p>In some cases I want to unselect the selected value of the select box. So that the blank option is selected. But I cannot get this to work. The select box does not get updated.</p>
  
  <p>I have created a <a href="http://jsfiddle.net/4s2YE/3/" rel="nofollow">jsfiddle</a> to show the problem.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
      &lt;form name="form"&gt;
          &lt;select ng-model="foo.hero" name="foo[hero]" my-directive=""&gt;
              &lt;option value=""&gt;&lt;/option&gt;
              &lt;option value="1"&gt;Batman&lt;/option&gt;
              &lt;option value="2"&gt;Superman&lt;/option&gt;
              &lt;option value="3"&gt;Spiderman&lt;/option&gt;
          &lt;/select&gt;
      &lt;/form&gt;
      &lt;p&gt;Selected: {{ foo.hero }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>var myApp = angular.module('myApp',[]);
  
  function MyCtrl($scope) {
      $scope.foo = {hero: '2'};
  }
  
  myApp.directive('myDirective', function($timeout) {
      return {
          require: ['ngModel', '?form'],
          link: function(scope, element, attrs, ctlrs) {
              $timeout(function() {
                  var modelController = ctlrs[0];
                  modelController.$setViewValue('');
              });
          }
      };
  });
  </code></pre>