Angular Radio Buttons Instead of Select - angularjs

Question

I'm trying to replace a select with radio buttons - but when I swap to radio buttons I loose my initial selection and the selecting breaks.
$scope.selection = Address.get(); // { id: 1, name: "Home" };
$scope.addresses = Address.query(); // [{ id: 1, name: "Home" }, { id: 2, name: "Work" }];
From (in this sample the select has "Home" selected):
<select class="form-control" ng-model="selection"
ng-options="address.street for address in addresses track by address.id">
</select>
To (in this sample the radio button for "Home" is not selected):
<div ng-repeat="address in addresses track by address.id">
<label>
<input type="radio" ng-value="address" ng-model="selection" />
<span>{{address.name}}</span>
</label>
</div>
Fiddle: https://jsfiddle.net/xczdcqx0/7/
EDIT:
I need the selection to reflect the id and name after changes:
<span>Selection:</span> <span>{{selection.name}} - {{selection.id}}</span>

Answer 1

Try this instead (for you radio input). Turns out that the ng-repeat is what's throwing it off (you needed to use $parent.selection):
<input type="radio" ng-value="address" ng-model="$parent.selection"/>
I think it's working the way you'd hope with this update to your fiddle
Initial Value
Jeez. I feel like an idiot, but I finally figured out that angular has no way of telling that your initial "selection" is the same as address[0].
So - I had to change the way you set $scope.selection as well:
app.controller("SampleController", ['$scope', function($scope) {
$scope.addresses = [
{ id: 1, name: "Home" },
{ id: 2, name: "Work" },
];
$scope.selection = $scope.addresses[0];
}]);
Now we're all set. Sheesh ... that was one of those "hiding in plain sight" bugs...

Answer 2

The value and model should be a string according to the input[radio] docs:
<input type="radio" ng-value="address.name" ng-model="selection.name" />
JSFiddle Demo: **https://jsfiddle.net/xczdcqx0/2/

Answer 3

Source:
<div ng-repeat="address in addresses track by address.id">
<label>
<input type="radio" ng-checked="checked(address)" ng-click="click(address)" />
<span>{{address.name}}</span>
</label>
</div>
Controller:
app.controller("SampleController", ["$scope", "Address", function($scope, Address) {
$scope.selection = Address.get(); // { id: 1, name: "Home" };
$scope.addresses = Address.query(); // [{ id: 1, name: "Home" }, { id: 2, name: "Work" }];
$scope.checked = function(address) {
return address.id === $scope.selection.id;
};
$scope.click = function(address) {
$scope.selection = address;
};
}]);
Note: extracted partially from solutions provided by #bri.