title: angularjs select drop down validation
body: <p>Angular v1.57:</p>
  
  <p>Got a question, when I fill my select drop down I want to validate it. It should be required AND an item should be selected. When I get some data in my model and it's not good, the drop-down should not have selected anything. This works, out of the box, but it should make my select drop-down field $invalid in order to draw a simple red border around it (with css). All my input fields has the same construction.</p>
  
  <p>As you can see, I have tried it with the plnkr, below, but no luck. The select drop-down field stays valid, even when nothing is selected, but my model ($scope.data.selector) has a "falsy" value.</p>
  
  <pre class="lang-js prettyprint-override"><code>$scope.data = {
      selector: 3
  }
  </code></pre>
  
  <p>When I change the model to a valid value, e.g:</p>
  
  <pre class="lang-js prettyprint-override"><code>$scope.data = {
      selector: 2
  }
  </code></pre>
  
  <p>I can see the value that is selected in the drop-down. But when there is a "falsy" value, the select drop-down should be $invalid. How can I achieve this (it should act like the input field when there is no value).</p>
  
  <p><a href="http://plnkr.co/edit/unmF87anBrm4q8ZguPMp?p=preview" rel="nofollow">http://plnkr.co/edit/unmF87anBrm4q8ZguPMp?p=preview</a></p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;body ng-app="myApp" ng-controller="MyController"&gt;
    &lt;form name="testForm" novalidate=""&gt;
      &lt;label&gt;Select a number&lt;/label&gt;
      &lt;div ng-class="{'has-error': testForm.testList.$invalid}"&gt;
        &lt;select class="form-control" name="testList" ng-model="data.selector" ng-options="item.value as item.label for item in list" required&gt;&lt;/select&gt;
      &lt;/div&gt;
  
      &lt;label&gt;Input something&lt;/label&gt;
      &lt;div ng-class="{'has-error': testForm.testInput.$invalid}"&gt;
        &lt;input class="form-control" name="testInput" type="text" ng-model="data.inputor" required /&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>var myApp = angular.module("myApp", []);
  
  myApp.controller("MyController", function($scope) {
    $scope.data = {
      selector: 3,
      inputor: ""
    }
    $scope.list = [{
      value: 1,
      label: "One"
    }, {
      value: 2,
      label: "Two"
    }];
  });
  </code></pre>