AngularJS does not set any value in a drop-down list for a boolean model field

Question

Despite my model contains a boolean value, below code displays true:

{{ moduleDAO.includeIntermediate }}

the following HTML code:

<div class="form-group" ng-class="{'has-error': ModuleDAOForm.includeIntermediate.$invalid}">
    <label for="includeIntermediate" class="col-sm-2 control-label">Include Intermediate</label>
    <div id="includeIntermediateControls" class="col-sm-10">
    <select id="includeIntermediate" name="includeIntermediate" class="form-control" ng-model="moduleDAO.includeIntermediate" >
        <option value="">Choose a value</option>
        <option value="false">false</option>
        <option value="true">true</option>
    </select>
    </div>
</div>

renders a drop-down list without any value set, why?

BTW. The above code has been generated by the JBoss Forge AngularJS scaffold plugin.

Answer 1

Seems like AngularJS has a problem selecting an option before hand if the value is a boolean. It does work however if you use ng-options to define your option tags:

controller

$scope.options = [
    {value: '', label: 'Choose a value'},
    {value: false, label: 'false'},
    {value: true, label: 'true'},
];

html

<select ng-options="o.value as o.label for o in options"></select>

But if you do not have access to the code and it's generated automatically for you, this fix might be harder to implement!? Let me know if you can achieve this.

Answer 2

Was dealing with this same issue recently..

<select ng-model="currentInvite.isLegal">
         <option value="1" ng-selected="currentInvite.isLegal">Yes</option>
         <option value="0" ng-selected="!currentInvite.isLegal">No</option>
</select>