Angularjs radio buttons

Question

Angularjs radio buttons

I know that this has been spoken about in some Google Threads but I still can't find the right solution to bind my radio inputs to a model (in clean'n simple manner),

Currently I have HTML:

<input ng-model="searchByRma" type="radio" name="search-type">
<input ng-model="searchByDelivery" type="radio" name="search-type">

And in Controller:

$scope.searchByRma      = true;
$scope.searchByDelivery = false;

This does not work (as it would with the checkboxes)...

Any ideas on how to set the default value on the first radio button without loosing data-binding?

Thanks!

javascript
data-binding
angularjs

Answer 1

I think you should use same variable with different values in those two radio buttons.

<input ng-model="searchBy" value="Rma" type="radio" name="search-type">
<input ng-model="searchBy" value="Delivery" type="radio" name="search-type">

Then, you should have searchBy set either "Rma" or "Delivery" depending on user input.

Answer 2

What has worked for me is to set the model variable to { } and that will reset the radio buttons to their default (not selected) state. Of course, this will only work if you have your radio button tags correct as in tosh's answer.

In your case:

$scope.searchBy = { };