title: AngularJS directive for "html select required"
body: <p>Another day with another question. I'm working again on my web application. Now I got a problem. THe 'required' attribute is not supported in major browsers
  (<a href="http://www.w3schools.com/tags/att_select_required.asp" rel="nofollow">http://www.w3schools.com/tags/att_select_required.asp</a>)
  , it only works if the first option value is empty. Well that works fine, the submit event does nothing if the form is $invalid and it is when it's left by "Please select". <br/></p>
  
  <pre><code>Land*:&lt;br /&gt;
                  &lt;select id="countries" name="country" data-ng-model="contact.country" required required-select&gt;
                      &lt;option value=""&gt;Please select&lt;/option&gt;
                      &lt;script type="text/javascript"&gt;
                          $(document).ready(function () {
  
                              var countries = {};
                              if (countries.length &gt; 0) {
                                  return countries;
                              } else {
                                  $.get('WebKalkTool/country_de.xml', function(data) {
                                      countries = data;
                                      var that = $('#countries');
                                      $('name', countries).each(function() {
                                          $('&lt;option /&gt;', {
                                              text: $(this).text(),
                                          }).appendTo(that);
                                      });
                                  }, 'xml');
                              }
  
                          });
                      &lt;/script&gt;
                  &lt;/select&gt;
                  &lt;span class="error" data-ng-show="mandatory"&gt;Please select an item&lt;/span&gt;
              &lt;/p&gt;
  </code></pre>
  
  <p>What I'm searching is a directive which checks if the value is empty, and then shows
  the error after submit and if they select an item, the error vanishes. <br/></p>
  
  <p>Now the directive should maybe look something like this:</p>
  
  <pre><code>authApp.directive('requiredSelect', function () {
  return {
      require: 'select',
      link: function (scope, formElement, attr, formSelect) {
  
          console.log('FORM : Linker called');
          console.log(formSelect);
          console.log(formSelect.selected.value); // is undefined..
  
  
  
          scope.$watch(formSelect.selectedIndex.value, function () {
              console.log("index changed"); // Always log when another index is selected
              if (formSelect.selectedIndex.value == "") {
                  console.log("value="");
   // only show error after submit OR has visited on span id mandatory (or add new template?
   // Tell the form, it's invalid, select is invalid
              } else if (formSelect.selectedIndex.value != "") {
                  console.log("index &gt; 0");
   // everything is fine, select is valid
              } else {
                  console.log("FORMSELECT.SELECTINDEX = UNDEFINED");
   // just 4 testing my link
              }
          });
  
      }
  };
  </code></pre>
  
  <p>});</p>
  
  <p>I took out the HTML5 validation because of compatibility thoughts and HTML5 validation shows only the first hint anyway.<br/>
  It should be something equals like 'required' attribute for input fields and work the same way, I don't want to make my submit button disabled. Maybe I also can remove this "Please Select" option and leave it empty.<br/>
  <br/>
  Or maybe I'm just not that clever enough to do something equal like: <br/></p>
  
  <pre><code>&lt;span class="error" data-ng-show="requestForm.place.hasVisited &amp;&amp;   requestForm.place.$invalid"&gt;Required!&lt;/span&gt;
  </code></pre>
  
  <p>Doesn't matter if we check the value or the selectedIndex, whatever.</p>
  
  <p>Thanks for your help and regards <br/>
  Anthrax</p>