angularjs very simple yes/no boolean select directive not binding - angularjs

Question

I'm trying to write what must be the simplest angular directive which displays a Yes/No select list and is bound to a model containing a boolean value. Unfortunately the existing value is never preselected. My directive reads
return {
restrict: 'E',
replace: true,
template: '<select class="form-control"><option value="true">Yes</option><option value="false">No</option></select>',
scope: {
ngModel: '='
}
}
and I am calling the directive as
<yesno ng-model="brand.is_anchor"></yesno>
The select options display and the generated HTML reads as
<select class="form-control ng-isolate-scope ng-valid" ng-model="brand.is_anchor">
<option value="? boolean:false ?"></option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
The initial value of the bound model is "false" but it always displays an empty option and per the first option listed in the generated HTML.
Can anybody please advise?

Answer 1

You may not use <option> tags with angularjs.
Use the angular "ng-options" directive on the select element instead.
<select ng-options="..."></select>
See angular docs for it:
https://docs.angularjs.org/api/ng/directive/ngOptions
Your problems will be solved using this instead.

Answer 2

see we have to use <select ng-options="..."></select>
as per the angular js documentation or
we have to apply workaround for it by adding ng-selected directive of angular js so your code will be
<select class="form-control ng-isolate-scope ng-valid" ng- model="brand.is_anchor">
<option value="? boolean:false ?"></option>
<option value="true" ng-selected="brand.is_anchor == true">Yes</option>
<option value="false" >No</option>
</select>
This extra workaround we have to apply if we dont want to use
<select ng-options="..."></select>