title: AngularJS Radio button not binding
body: <p>I am a complete beginner at using Angular.js and I've run into an issue with data binding in a radio button situation. The related HTML code looks like this: </p>
  
  <pre><code>&lt;label class="options_box" ng-repeat="item in item_config_list.item_config"&gt; 
      &lt;input type="radio" name="config" ng-model="selectedConfig" ng-value="item"&gt; 
          {{ item.item }}
      &lt;/input&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>and controller is </p>
  
  <pre><code>App.controller('controller', function App ($scope, $http) {
  
      $.getJSON('res/prop/configs.json', function(data) {
      $scope.item_config_list = data;
  
  });
  </code></pre>
  
  <p>json file looks like this: </p>
  
  <pre><code>{
      "item_config": [
      {
          "name": "Config1",
          "configNr": "1"
      },
      {
          "name": "Config2",
          "configNr": "2"
      },
  ]
  }
  </code></pre>
  
  <p>How do I make the name property of the selected item from the radio list go into the "selectedConfig" object? I am later referring to the selectedConfig object to fetch data from a backend. </p>
  
  <p>I might also add that the duplication of radio buttons is working - as is the labelling of the buttons. They are named properly, they just aren't conferring the intended value to the intended object.</p>
  
  <p>Edit: Problem solved! I refactored above HTML code to </p>
  
  <pre><code>&lt;label class="options_box" ng-repeat="item in item_config_list.item_config"&gt; 
      &lt;input type="radio" name="config" ng-model="$parent.selectedConfig" ng-value="item.name"&gt; 
          {{ item.name }}
      &lt;/input&gt;
  &lt;/label&gt;
  </code></pre>