title: AngularJS data binding with select tag
body: <p>I cannot figure out why data binding is not working on a select tag, as the <a href="https://docs.angularjs.org/api/ng/directive/select" rel="nofollow">docs</a> specifies.</p>
  
  <p>This is my select element:</p>
  
  <pre><code>&lt;select id="start-type" ng-model="startType"&gt;
    &lt;option value="day-of-week"&gt;Day of the week&lt;/option&gt;
    &lt;option value="month"&gt;Month&lt;/option&gt;
    &lt;option value="month-day"&gt;Day and month&lt;/option&gt;
    &lt;option value="year"&gt;Year&lt;/option&gt;
    &lt;option value="year-month"&gt;Month and year&lt;/option&gt;
    &lt;option value="local-time" selected&gt;Time&lt;/option&gt;
    &lt;option value="local-date"&gt;Date&lt;/option&gt;
    &lt;option value="local-date-time"&gt;Date and time&lt;/option&gt;
  &lt;/select&gt;
  &lt;label for="start-type"&gt;Start type&lt;/label&gt;
  </code></pre>
  
  <p>The issue is that whenever an item is selected the <code>$scope.startType</code> model is never changed. It's always blank.</p>
  
  <p>I have tried defining <code>$scope.startType</code> in my controller but I don't see why that would change anything because it should work as it already is. And of course, it didn't help.</p>
  
  <p>I have gone through several working examples, but I can't see what I am missing here.</p>
  
  <p>Edit: I figured out what's happening. The CSS framework I am using didn't have Angular in mind at all. It is rendering a custom view for a select using its own divs and layout, while hiding the actual select element. But they didn't even hook the select action into the hidden select, so the angular directives or data binding are never being triggered... Any clue on how I could put it all together?</p>