Angularjs – How to assign Boolean value to model

angularjs

I have the following view with two input radio buttons:

<label>
    <input type="radio" name="test" ng-model="fooBar" 
        value="true" ng-change="logConsole()">
    True
</label>

<label>
    <input type="radio" name="test" ng-model="fooBar" 
        value="false" ng-change="logConsole()">
    False
</label>

And my controller looks like:

//Initialization
$scope.fooBar = false;

$scope.logConsole = function () {
    console.log("Value is : " + $scope.fooBar);
    console.log("Type is : " + typeof $scope.fooBar); //Always displays 'string'
};

My problem is that when the user selects either of the radio buttons, the type of the fooBar model is always a String, that is the value is either the String 'true' or the String 'false' – I want the type to be a boolean true value or a boolean false value.
How can I store a boolean value (from within the view) onto the model?

EDIT: I just tried this out and it still does not work. For the value attribute, I passed a function that would return boolean true or false, something like this:

<input type="text" value="{{getBoolean('true')}}....>

$scope.getBoolean = function (value) {
if (value === 'true') return true;
else return false;
};

It still results in a String when the radio buttons are selected…

Best Answer

One of the comments in the documentation says:

While ng-value is not documented, it is a useful directive, specifically when you are binding to a boolean value. 

<input ng-model="foo" type="radio" value="true">

may not work but 

<input ng-model="foo" ng-value="true" type="radio">

does.

Related Topic