radio button and array with angular js - angularjs

Question

i have this controller with name of three color.
<script>
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.color = [{
name: "Red"
},
{
name: "green"
},
{
name: "Blue"
}
];
}]);
</script>
I'd like to create 3 radio button who show the correspondig color and show on screen
<label>
<input type="radio" ng-model="color.name" value="red"> Red
<tt>color = {{color.name }}</tt>
</label>
i desire take the value directly from array and not from value. how i can do?
i have try with value="color.name" but don't run.
thank you.

Answer 1

All you need is a ng-repeat. here is a working sample.
var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
function($scope) {
$scope.colorName = "Blue";
$scope.colors = [{
name: "Red"
}, {
name: "green"
}, {
name: "Blue"
}];
}
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<label ng-repeat="color in colors">
<input type="radio" ng-model="$parent.colorName" ng-value="color.name" name="color-picker" />{{color.name}}
</label>
<tt>color = {{colorName}}</tt>
</div>
</div>
Or else using controllerAs Syntax you could do this.
var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
function($scope) {
$scope.colorName = "Blue";
$scope.colors = [{
name: "Red"
}, {
name: "green"
}, {
name: "Blue"
}];
}
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController as sc">
<label ng-repeat="color in colors">
<input type="radio" ng-model="sc.colorName" ng-value="color.name" name="color-picker" />{{color.name}}
</label>
<tt>color = {{sc.colorName}}</tt>
</div>
</div>