AngularJS required attribute doesn't work on select - angularjs

Question

I have a following problem with select in my AngularJS application.
I have set required attribute but it doesn't work on select tag. Doesn't
trigger native validation. Here is my html code:
<div ng-app="app">
<div ng-controller="testCtrl">
<form ng-submit="selectChanged()">
<select ng-model="first" required="required">
<option>choose</option>
<option value="2">2</option>
</select>
<input type="submit" value="test"/>
</form>
</div>
</div>
Here is my controller:
angular.module('app', []).controller('testCtrl', function ($scope) {
$scope.selectChanged = function () {
};
});
Here is working jsfiddle:
http://jsfiddle.net/zono/k3b5J/3/
Best regards.

Answer 1

Your code should be:
angular.module('app', []).controller('testCtrl', function ($scope) {
$scope.first = "";
$scope.selectChanged = function () {
alert($scope.first);
};
});
You didn't add the variable your select is bound to, $scope.first in this case.
And the empty option should have a value of "" --> <option value ="">choose</option>
Here is a working fiddle: http://jsfiddle.net/k3b5J/4/

Answer 2

You need to wire-up form validity with submit button, e.g. so it gets disabled when form is not valid
<div ng-app="app">
<div ng-controller="testCtrl">
<form name="myform" ng-submit="selectChanged()">
<select ng-model="first" required="required">
<option>choose</option>
<option value="2">2</option>
</select>
<input type="submit" value="test" ng-disabled="!myform.$valid"/>
</form>
</div>
</div>
I updated your fiddle to reflect that: http://jsfiddle.net/qt8z3/

Answer 3

The thing is that when option value is not defined, the text is taken as a value, so, when choose is selected, actual value of first should be choose.
Your code can be fixed like this:
<div ng-app="app">
<div ng-controller="testCtrl">
<form ng-submit="selectChanged()">
<select ng-model="first" required="required">
<option value="">choose</option>
<option value="2">2</option>
</select>
<input type="submit" value="test"/>
</form>
</div>
</div>
note value on <option value="">choose</option>
Edit note: when choose is selected, value actually exists, so field is filled and it passes required validation.