Improve this Doc View Source

## Overview

HTML radio button.

Note:
All inputs controlled by ngModel (including those of type `radio`) will use the value of their `name` attribute to determine the property under which their NgModelController will be published on the parent FormController. Thus, if you use the same `name` for multiple inputs of a form (e.g. a group of radio inputs), only one `NgModelController` will be published on the parent `FormController` under that name. The rest of the controllers will continue to work as expected, but you won't be able to access them as properties on the parent `FormController`.

In plain HTML forms, the `name` attribute is used to identify groups of radio inputs, so that the browser can manage their state (checked/unchecked) based on the state of other inputs in the same group.

In AngularJS forms, this is not necessary. The input's state will be updated based on the value of the underlying model data.

If you omit the `name` attribute on a radio input, `ngModel` will automatically assign it a unique name.

## Directive Info

- This directive executes at priority level 0.

## Usage

    <input type="radio"
           ng-model="string"
           value="string"
           [name="string"]
           [ng-change="string"]
           ng-value="string">

### Arguments

Param | Type | Details
--- | --- | ---
ngModel | string | Assignable AngularJS expression to data-bind to.
value | string | The value to which the `ngModel` expression should be set when selected. Note that `value` only supports `string` values, i.e. the scope model needs to be a string, too. Use `ngValue` if you need complex models (`number`, `object`, ...).
name (optional) | string | Property name of the form under which the control is published.
ngChange (optional) | string | AngularJS expression to be executed when input changes due to user interaction with the input element.
ngValue | string | AngularJS expression to which `ngModel` will be be set when the radio is selected. Should be used instead of the `value` attribute if you need a non-string `ngModel` (`boolean`, `array`, ...).

## Example

    <script>
      angular.module('radioExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.color = {
            name: 'blue'
          };
          $scope.specialValue = {
            "id": "12345",
            "value": "green"
          };
        }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">
      <label>
        <input type="radio" ng-model="color.name" value="red">
        Red
      </label><br/>
      <label>
        <input type="radio" ng-model="color.name" ng-value="specialValue">
        Green
      </label><br/>
      <label>
        <input type="radio" ng-model="color.name" value="blue">
        Blue
      </label><br/>
      <tt>color = {{color.name | json}}</tt><br/>
     </form>
     Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.

    it('should change state', function() {
      var inputs = element.all(by.model('color.name'));
      var color = element(by.binding('color.name'));

      expect(color.getText()).toContain('blue');

      inputs.get(0).click();
      expect(color.getText()).toContain('red');

      inputs.get(1).click();
      expect(color.getText()).toContain('green');
    });