Simple directive

by Uday Hiwarale

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div>Parent controller tires : {{tires}}</div>
	<car tires="tires" increment-tires="increment()"></car>
</div>

JavaScript

angular
	.module('myApp', [])
	.controller('myCtrl', function($scope){
		$scope.tires = 2;
	})
	.component('car', {
		bindings : {
			tiresCount : '<tires'
		},
    controller : function(){
    	var _this = this;
      
      _this.incrementTires = function(){
      	_this.tiresCount += 1;
      }
    },
		template : '<b>I am car with {{$ctrl.tiresCount}} tires.</b> <button ng-click="$ctrl.incrementTires()">Increment Tires</button>'
	});