radio button groups nested inside checkbox list with angularjs ng-repeat - angularjs-ng-repeat

Question

In this example I'm nesting radio buttons inside checkboxes:
html:
<div ng-app ng-controller="Controller">
<div name="myForm">
<ul>
<li ng-repeat="item in items">
<label>
<input type="checkbox" ng-model='item.selected' />{{item.name}}</label>
<ul>
<li ng-repeat="format in item.formats">
<label>
<input type="radio" ng-model='format.selected' name='what name ?'/>{{format.title}}</label>
</li>
</ul>
</li>
</ul>
</div>
<button ng-click='onClick()'>Go</button>
</div>
js:
function Controller($scope) {
$scope.items = [{
name: 'cb1',
selected:false,
formats: [{
title: 'rb1a',
selected: false
}, {
title: 'rb1b ',
selected: false
}]
}, {
name: 'cb2 ',
selected:false,
formats: [{
title: 'rb2a ',
selected: false
}, {
title: 'rb2b',
selected: false
}]
}];
$scope.onClick = function () {
console.log('clicked');
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].selected) {
console.log('Controller item selected', $scope.items[i]);
}
for (var j = 0; j < $scope.items[i].formats.length; j++) {
if ($scope.items[i].formats[j].selected)
console.log('Controller format selected', $scope.items[i].formats[j]);
}
}
};
};
I have two questions:
when I select an rb in one group the selected rb in the other group gets unselected. So they are not groups yet. How can I make real groups? I thought by using the name directive, but how?
when I click the Go button I'd like to have set the selected properties in $scope.items correctly, both for checkboxes and radio buttons.
I tried a lot already, that's why I'm now just providing stripped down code.
http://jsfiddle.net/JeffW/crn1t7wy/

Answer 1

1) You need to set the name to be unique for each group of radio buttons. You can do it with the $index argument angular provides with ng-repeat.
2) You misplaced single quotes and this is why it doesn't work. HTML accepts only double quotes or single quotes as attribute values but not mixed.
<div ng-app ng-controller="Controller">
<div name="myForm">
<ul>
<li ng-repeat="item in items">
<label>
<input type="checkbox" ng-model='item.selected' />{{item.name}}</label>
<ul>
<li ng-repeat="format in item.formats">
<label>
<input type="radio" ng-value="format.title" ng-model="item.selectedRadio" name="myName{{$parent.$index}}"/>{{format.title}}</label>
</li>
</ul>
</li>
</ul>
</div>
<button ng-click='onClick()'>Go</button>
</div>
Fixed version is here:
http://jsfiddle.net/crn1t7wy/3/
EDIT: Fixed the answer based on the comments