Angular1 component with 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 ng-model="vm.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.car = {};
})

.component('colorSelect', {
  bindings: {
    ngModel: '='
  },
  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.ngModel = this.color;
    }
  }
})