I have the following code for a select drop down input that is styled in Bootstrap.
You can try to add form, like:
HTML
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="mainForm">
<select name="businessprocess" ng-model="businessprocess" required>
<option value="">-- Select Business Process --</option>
<option ng-repeat="v in processes" value="{{v.id}}">{{v.value}}</option>
</select>
<span class="error" ng-show="mainForm.businessprocess.$error.required">required</span>
</form>
</div>
js
angular.module('myApp', []);
function MyCtrl($scope, $timeout) {
$scope.processes = [{
id: "C",
value: "Process C"
}, {
id: "Q",
value: "Process Q"
}];
}
Demo Fiddle
Add "disabled" to the first option:
<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
<option value="" disabled>-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
This approach could/should solve your issue:
1) declare the options inside of your scope:
$scope.processes = [
{ code: "C", name: "Process C" },
{ code: "Q", name: "Process Q" }
];
And 2) use this declaration:
<select class="form-control" name="businessprocess" ng-model="businessprocess" required
ng-options="c.code as c.name for c in processes" >
<option value="">-- Select Business Process --</option>
</select>
The trick here is in fact, that during the angular cycles, will firstly fix the issue that the the current value is not among the processes
options. So, the default would be set to:
<option value="">-- Select Business Process --</option>
and required
will be working as expected (more details)