Angular1 component with onUpdate callback instead of two way binding to ng-model

by HoffZ

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="TestingCtrl as vm">

    <h3>
    Select color
    </h3> Color:
    <color-select on-update="vm.setColor(color)"></color-select>
    <p ng-if="!vm.color" class="error">
      You must select a color
    </p>

    <p ng-if="vm.color">
      You have selected the color: {{vm.color}}
    </p>

  </div>
</div>

CSS

.error {
  color: red;
}

JavaScript

angular.module('app', [])

.controller('TestingCtrl', function TestingCtrl() {
  this.setColor = function(color) {
    this.color = color;
  }
})

.component('colorSelect', {
  bindings: {
    onUpdate: '&'
  },
  template: 
  	'<input type="radio" ng-model="$ctrl.color" value="Red" ng-click="$ctrl.colorSelect()"> Red ' +
    '<input type="radio" ng-model="$ctrl.color" value="Green" ng-click="$ctrl.colorSelect()"> Green',
  controller: function() {
    this.color = '';
    this.colorSelect = function() {
      this.onUpdate({
        color: this.color
      });
    };
  }
})