Radio Objects

by Rob Rothe

HTML

<div ng-app="app">
   <div ng-controller="Controller as ctrl">
      <label>
         Foo
         <input type="radio" name="test" ng-click="ctrl.setRadio(ctrl.foo)">
      </label>
      <label>
         Bar
         <input type="radio" name="test" ng-click="ctrl.setRadio(ctrl.bar)">
      </label>
      <hr>
      <p ng-if="ctrl.selected_radio">
         The id for selected radio is <strong>{{ ctrl.selected_radio.id }}</strong>, and value is <strong>{{ ctrl.selected_radio.value }}</strong>
      </p>
   </div>
</div>

JavaScript

angular
   .module('app', [])
   .controller('Controller', Controller);

function Controller() {
   var vm = this;

   vm.selected_radio = null;
   vm.foo = {
      id: 1,
      value: 'Foo'
   };
   vm.bar = {
      id: 2,
      value: 'Bar'
   };
   vm.setRadio = setRadio;

   function setRadio(obj) {
      vm.selected_radio = obj;
   }
}