Here is a basic plunker that demonstrates the problem.
When you set the dropdownlist/select element model to empty you receive the required error message
But when you set the model from controller, and the model is not a option in the provided ng-options select element fails to show required. But the dropdown/select is in invalid state
Plunker
http://plnkr.co/edit/gLtjRwkaaBOQG7YMvDav?p=preview
So how do we go about solving this problem?
Reference Documentation - Scroll to the bottom to the $error section.
$error only validates attributes of the select tag and not the option selected.
required is an attribute of the select tag - thus when the dropdown is empty, the $error flag is set to true.
However, assigning an option that is not among the predefined options is not handled by $error - you have to handle this yourself using something like:
<input type="button" value="Submit" ng-click="submitForm($event)">
And in your controller:
$scope.submitForm = function (event) {
event.preventDefault();
//Do your validation on the select value
//If everything is fine, call the actual submit function
};
