Angular radio button doesn't pick an initial value

Question

I have a radio button with two available values - male and female when the value of male is true and female is false.

<div id="gender" class="btn-group">
    <label class="btn btn-success" ng-model="userDetails.gender" btn-radio="true" uncheckable>Male</label>
    <label class="btn btn-success" ng-model="userDetails.gender" btn-radio="false"
           uncheckable>Female</label>
</div>

In the controller code, I get the existing value in the server and then put it in the ng-model as follows:

 $scope.userDetails.gender = currentUser.get('Gender');

which returns true or false.

What I want is that the relevant radio button will be picked by the initial value, for example: if the controller code returns "true" I want the true button to be marked pressed.

Answer 1

if the controller code returns "true" ...

I guess this is your problem. Your HTML configuration specifies that model value should have boolean type, not a string. So you need to make sure currentUser.get('Gender') returns true/false as boolean. Or otherwise define radio attributes as btn-radio="'true'" and btn-radio="'false'"