AngularJS radiobutton странное поведение

Question

Я пытаюсь сделать простую вещь: поместите список моих объектов JSON в форму, используя AngularJS. И я хочу сопоставить один из параметров с элементом управления HTML radiobutton. Это шаблон HTML:

<div ng-app="myApp" ng-controller='MainController'> 
    <div ng-repeat="channel in channels"> 
     <p>Case {{ channel.schedule.timeOfDay }}</p> 
     <input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="0" name="channel">Case 0</input> 
     <input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="1" name="channel">Case 1</input> 
     <input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="2" name="channel">Case 2</input> 
     <input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="3" name="channel">Case 3</input> 
     <hr> 
    </div> 
</div> 

И простой контроллер:

var app = angular.module('myApp', []); 
app.controller('MainController', function ($scope) { 
    $scope.channels = [{ 
     "id": 4, 
     "subject": null, 
     "body": "Votre utilisation de données a atteint (SMS) [Percentage]%", 
     "schedule": { 
      "dayOfWeek": 24, 
      "timeOfDay": 3, 
      "from": 1, 
      "to": 4 
     }, 
     "channelType": 0 
    }, { 
     "id": 5, 
     "subject": null, 
     "body": "Votre utilisation de données a atteint (USSD) [Percentage]%", 
     "schedule": { 
      "dayOfWeek": 18, 
      "timeOfDay": 1, 
      "from": 0, 
      "to": 0 
     }, 
     "channelType": 1 
    }, { 
     "id": 6, 
     "subject": "Avertissement", 
     "body": "Votre utilisation de données a atteint (E-Mail) [Percentage]%", 
     "schedule": { 
      "dayOfWeek": 33, 
      "timeOfDay": 3, 
      "from": 15, 
      "to": 22 
     }, 
     "channelType": 2 
    }] 
}); 

I created jsfiddle for this example/

Итак, как вы можете видеть, я картирование channel.schedule.timeOfDay контролю RadioButton, и здесь это странное поведение. Радиатор не отражает значение для первого и второго элементов массива, но делает для третьего. Кто-нибудь, пожалуйста, объясните, что происходит?

Answer 1

Взял меня немного тоже изменить HTML, чтобы: (обратите внимание на имя каждой группы опций должны быть уникальными)

<div ng-app="myApp" ng-controller='MainController'> 
<div ng-repeat="channel in channels | orderBy:'body': false"> 
    <p>Case {{ channel.schedule.timeOfDay }} {{ channel.id }}</p> 
    <input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="0" name="t{{channel.id}}">Case 0</input> 
    <input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="1" name="t{{channel.id}}">Case 1</input> 
    <input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="2" name="t{{channel.id}}">Case 2</input> 
    <input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="3" name="t{{channel.id}}">Case 3</input> 
    <hr> 
</div>