Improve this Doc View Source

## Overview

HTML radio button.

## 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');
    });