title: Radio button with ng-repeat not always initialized
body: <p>I want a list of radio buttons to be modified at runtime when other buttons are clicked. When the list of radio buttons has been modified, the first radio button of the list should always be selected by default.
  Additionnally, the visibility of some divs depends on which radio button is currently selected.</p>
  
  <p>Here is the plunker <strike><a href="http://plnkr.co/edit/KlMCg3JmT43boP0JwU7R" rel="nofollow">http://plnkr.co/edit/KlMCg3JmT43boP0JwU7R</a></strike> <strong>(see update)</strong></p>
  
  <p>So I have a list of radio buttons :</p>
  
  <pre><code>&lt;body ng-app="app" ng-controller="ctrl"&gt;
  &lt;div class="btn-group"&gt;
      &lt;li ng-repeat="item in currentSpecificTypes"&gt;
        &lt;a href="" ng-click="specificTypeSelected($index)"&gt;{{item.label}}&lt;/a&gt;
      &lt;/li&gt;
      &lt;label ng-repeat="item in currentPeriodTypes" class="radio-inline"&gt;&lt;input type="radio" name="optPeriod" ng-click="periodSelected($index)" ng-value="$index" ng-model="selectedPeriod"&gt;{{item.label}}&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div ng-show="selectedPeriod == 0"&gt;0&lt;/div&gt;
  &lt;div ng-show="selectedPeriod == 1"&gt;1&lt;/div&gt;
  &lt;div ng-show="selectedPeriod == 2"&gt;2&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The list (currentPeriodTypes) is modified when one of the li is clicked. The radio whose index is "0" is supposed to be selected by default :</p>
  
  <pre><code>angular.module("app", [])
  .controller("ctrl", ["$scope", function($scope)
  {
  $scope.periodTypes = [
    {label:"Hours", value: 0},
    {label: "Morning", value: 1},
    {label: "Afternoon", value: 2},
    {label: "Day", value: 3}
  ];
  
  $scope.currentSpecificTypes = [
    {label: "type1", hourAllowed: false, morningAllowed: true, afternoonAllowed: true, dayAllowed: true},
    {label: "type2", hourAllowed: false, morningAllowed: false, afternoonAllowed: true, dayAllowed: true},
    {label: "type3", hourAllowed: false, morningAllowed: true, afternoonAllowed: false, dayAllowed: true}
    ];
  
  $scope.specificTypeSelected = function (stIndex)
  {
  
      $scope.selectedSpecificType = stIndex;
  
      $scope.currentPeriodTypes.length = 0;
      if ($scope.currentSpecificTypes[stIndex].hourAllowed) $scope.currentPeriodTypes.push($scope.periodTypes[0]);
      if ($scope.currentSpecificTypes[stIndex].morningAllowed) $scope.currentPeriodTypes.push($scope.periodTypes[1]);
      if ($scope.currentSpecificTypes[stIndex].afternoonAllowed) $scope.currentPeriodTypes.push($scope.periodTypes[2]);
      if ($scope.currentSpecificTypes[stIndex].dayAllowed) $scope.currentPeriodTypes.push($scope.periodTypes[3]);
  
      $scope.periodSelected(0);
  };
  
  $scope.periodSelected = function (index)
  {
      $scope.selectedPeriod = index;
      alert(index);
  };
  
  $scope.dateSelected = function (date) {
  };
  
  
  $scope.currentPeriodTypes = [];
  
  }]);
  </code></pre>
  
  <p>So in spite of the $scope.periodSelected(0), when clicking on the li, and playing with the radios, it happens that no radio button is selected by default.</p>
  
  <p><strong>Update</strong>
  The first plunker that I provided lacked the ng-model attribute. My bad.
  Here is a corrected version <a href="http://plnkr.co/edit/DedNOrpwzwKhRYvKdHcf?p=preview" rel="nofollow">http://plnkr.co/edit/DedNOrpwzwKhRYvKdHcf?p=preview</a>
  When one selects Type 1, then Type 2, then Type 3, indeed one can see the first radio button selected each time. But when one I selects "Type 1", then "Afternoon", then "Type 2", no option is pre-selected anymore. That's the problem I can't firgure out.</p>