JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<div ng-controller="CountCtrl as vm">
    <counter count="vm.count"></counter>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.5.0/angular.min.js"></script>
<style>
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body { background: #eee; margin: 0; padding: 25px; }

JavaScript

angular
	.module('Todo', [])
	.controller('CountCtrl', function CountCtrl() {
	  this.count = 4;
	})
	.directive('counter', function counter() {
      return {
        scope: {},
        bindToController: {
          count: '='
        },
        controller: function () {
          function increment() {
            this.count++;
          }
          function decrement() {
            this.count--;
          }
          this.increment = increment;
          this.decrement = decrement;
        },
        controllerAs: 'counter',
        template: [
          '<div class="todo">',
            '<input type="text" ng-model="counter.count">',
            '<button type="button" ng-click="counter.decrement();">-</button>',
            '<button type="button" ng-click="counter.increment();">+</button>',
          '</div>'
        ].join('')
      };
    });

document.addEventListener('DOMContentLoaded', function () {
	angular.bootstrap(document, ['Todo']);
});