JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="test">
<led />
</div>

CSS

.led
{
	width: 100px;
	height: 100px;
	border-style: solid;
	border-width: 2px;
}

.led-on
{			
	background-color: green;
}

.led-off
{
	background-color: red;
}

JavaScript

var test = angular.module("test", []);
test.directive("led", function()
{	
	return {
		restrict: "E",
		replace: true,
		template: "<div class='led led-off' ng-class='{ \"led-on\": isOn }'>{{isOn}}</div>",
		link: function(scope, element, attributes, controller)
		{
			scope.isOn = false;

			element.bind("click", function()
			{
				scope.isOn = !scope.isOn;
			});
		}
	};
});