title: Angular 2 Change selected radio button dynamically
body: <p><strong>EDIT</strong></p>
  
  <p>What I want is a group of radio buttons where selecting a radio button selects another radio button; the 'CLICKED' (not selected) radio button never gets selected by <em>attempting to select it</em> (by clicking on it) where its default behavior is that 'CLICKED' radio gets 'SELECTED'. Something like <a href="https://plnkr.co/edit/JhhaNZ9tUYANOOp5vzVx" rel="nofollow noreferrer">this Angular 2 demo</a>.</p>
  
  <p>But this demo is not exactly what I want because it has delay in selecting another radio.</p>
  
  <p><a href="https://plnkr.co/edit/Ktutr8DIr9Sb2ezGVyQU" rel="nofollow noreferrer">Here is the demo with jQuery.</a> This has no delay, and clicking on a radio button will <strong>NEVER</strong> check that radio button. For example, <em>clicking</em> the second radio button never <em>selects</em> the second radio button. To <em>select</em> the second radio button, you need to <em>click</em> the first radio button.</p>
  
  <hr>
  
  <p>OLD: What I'm trying to do with Angular 2 is that I have 3 radio elements A, B, and C, and 2 of them, A and B can be selected, and when the third one, C, gets selected it should select B. So, C never gets selected visually, or for a blink of moment.</p>
  
  <p>I couldn't make this work. So I thought recreating the problem but simpler would be a good idea, so I'm trying to solve this easier problem. I could make it so that selecting A selects B, selecting B selects C, and selecting C selects A.</p>
  
  <p>A is the first radio button, B is the second, C is the third radio button.</p>
  
  <pre><code>onRadioChange(val) {
      val = val == 2 ? 0 : ++val;
      this.radio_val=val;
  }
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/PNk6V4H9LgH55HbJdvuO" rel="nofollow noreferrer">Here is the plunker demo</a></p>
  
  <p>However, as you can see in the demo, it only works on the first click. So, clicking on B WILL select C, but clicking on B AGAIN will select B.</p>
  
  <p>I think this is the main issue.</p>
  
  <p>Above demo uses [(ngModel)] but the same goes for [checked].</p>
  
  <p><a href="https://plnkr.co/edit/HCrIHdAnmtrBN0T6jgQV" rel="nofollow noreferrer">Here is the demo with checked</a></p>
  
  <p>However, doing this with setTimeout and [(ngModel)] works</p>
  
  <p><a href="https://plnkr.co/edit/JhhaNZ9tUYANOOp5vzVx" rel="nofollow noreferrer">Here is what I want to do but without delays</a></p>
  
  <p>Is this something to do with Angular2's <a href="https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#" rel="nofollow noreferrer">Lifecycle Hooks</a>?</p>
  
  <p>Please help.</p>