Improve this Doc View Source

HTML radio button.

## Directive Info

- This directive executes at priority level 0.

## Usage

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

### Arguments

Param | Type | Details
--- | --- | ---
ngModel | string | Assignable angular expression to data-bind to.
value | string | The value to which the expression should be set when selected.
name (optional) | string | Property name of the form under which the control is published.
ngChange (optional) | string | Angular expression to be executed when input changes due to user interaction with the input element.
ngValue | string | Angular expression which sets the value to which the expression should be set when selected.

## Example

Edit in Plunker

    <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">
      <input type="radio" ng-model="color.name" value="red">  Red <br/>
      <input type="radio" ng-model="color.name" ng-value="specialValue"> Green <br/>
      <input type="radio" ng-model="color.name" value="blue"> Blue <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 color = element(by.binding('color.name'));

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

      element.all(by.model('color.name')).get(0).click();

      expect(color.getText()).toContain('red');
    });