Angular2 - RadioButtonState not working as expected

Question

I am having a little trouble trying to make RadioButtonState work as it suppose to. I have tried using RadioButtonState the following way:

import {Component} from '@angular/core';
import {RadioButtonState} from '@angular/common';
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
    selector: 'my-app',
    template:`
    Select Gender:
    <span *ngFor="let gender of inputs; let i=index" >
        <input type="radio" name="gender" [(ngModel)]="inputs[i]" /> {{gender.value}}
    </span>

    <br>
    {{inputs | json}}
    `
})
export class AppCmp{
    public inputs = [
        new RadioButtonState(false,"Male"),
        new RadioButtonState(false,"Female")
    ]
}

bootstrap(AppCmp);

When I click any radio button it makes the value to true but switching between the radio buttons do not make any of them false again. I re-produced the problem here on plunker.

Answer 1

This is a known issue https://github.com/angular/angular/issues/7374

A mentioned workaround until this gets fixed:

<label class="radio-inline">
  <input type="radio"
      value="male" 
      #male
      [checked]="child.gender === 'male'"
      (click)="child.gender = male.value"
      name="gender">Male</label>                   

<label class="radio-inline">
  <input type="radio"
      #female
      value="female"
      [checked]="child.gender === 'female'" 
      (click)="child.gender = female.value" 
      name="gender">Female</label>