title: Binding with radio's not working in Angular
body: <p>Using ng-repeat I display some radio's in the edit form:</p>
  
  <pre><code>&lt;label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first"&gt;
      &lt;input type="radio" name="gender"  value="{{gender.Id}}" data-ng-model="customerFormData.customer.Gender.Id" /&gt;{{gender.Description}}
  &lt;/label&gt;
  </code></pre>
  
  <p>As you can see, I've applied the 'dot practice'. The edit form is a pop-up over my detail form. In my detail form I have this:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;Gender:&lt;/td&gt;
      &lt;td&gt;{{ customer.Gender.Description }} &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>All my bindings in the edit form are working, but I can't get the gender binding to work. I think it has something to do with scope inheriting by the use of ng-repeat.</p>
  
  <p>I've also tried to use <code>$parent</code>, but the outcome remains the same:</p>
  
  <pre><code>&lt;label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first"&gt;
      &lt;input type="radio" name="gender"  value="{{gender.Id}}" data-ng-model="$parent.customerFormData.customer.Gender.Id" /&gt;{{gender.Description}}
  &lt;/label&gt;
  </code></pre>
  
  <p>Setting the initial value works. When a female is set, the female radio is selected and when it is a male, the male radio is selected.</p>
  
  <p>A second problem is (and I think it has to do with the binding), is that when Male is selected, I have to click twice on female to get female selected.</p>
  
  <p>Edit: I've created a <a href="http://jsfiddle.net/martijngr/ADukg/3182/" rel="nofollow">Fiddle</a> to illustrate my issue.</p>