I have an angularJS controller that creates a scope with a list of items and has a property for the selected item. During initialization I create the list and set the selectedItem property to the second item in the list.
app.controller('MainCtrl', function($scope) {
$scope.items = [
{id: 1, name: "Item 1"},
{id: 2, name: "Item 2"},
{id: 3, name: "Item 3"}
];
$scope.selectedItem = $scope.items[1];
});
The view is a list with a checkbox for each item.
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<label>
<input type="radio" ng-model="$parent.selectedItem" ng-value="{{item}}" ng-checked="$parent.selectedItem==item">
{{item.name}}
</label>
</div>
Selected Value: {{selectedItem}}
<div>
<button ng-click="selectedItem=items[2]">Select 3</button>
</div>
</body>
Everything is working correctly except that the second radio button isn't displaying as checked when the view loads. Selecting a radio button changes the selectedItem as expected. I also added a button to demonstrate that I can set the selectedItem to the third item and the radio buttons will update accordingly.
Here is a plunker that demonstrates the issue.
You have a typo in your html template for the ng-value attribute, it should be
<label>
<input type="radio" ng-model="$parent.selectedItem" ng-value="item">
{{item.name}}
</label>