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 angular 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	Angular expression to be executed when input changes due to user interaction with the input element.
ngValue	string	Angular 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

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