AngularJS radio binding

binding to angular radio buttons in ng-repeat

by lisapfisterer

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<div ng-controller="appController">

    <h1>This is my {{title}}</h1>

    <p>
        Selected Object: {{formData.style.name}}, {{formData.style.value}}
    </p>

    <form>
        <label>Radio-Buttons</label>
        <br/>

        <label ng-repeat="style in styles">
            <input type="radio" ng-model="formData.style" ng-value="style"> {{style.name}}
        </label>

    </form>

</div>

JavaScript

var app = angular.module('app', [])
       .controller('appController', appController);

   appController.$inject = ['$scope', '$window'];

   function appController($scope, $window) {

       $scope.title = "radio example";

       var first = {
           name: "First Name",
           value: "First Value"
       };
       var second = {
           name: "Second Name",
           value: "Second Value"
       };
       var third = {
           name: "Third Name",
           value: "Third Value"
       };

       $scope.styles = [first, second, third];

       $scope.formData = {};
       $scope.formData.style = $scope.styles[0];

   };