<!DOCTYPE html>

  <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

  <h1>Angular directive demo  </h1>
   <p>  It monitor specific attribute and respond to it. In our case we have 
   declare attribute call "tag". We can have it in different controls if we want. 
  <br /><br /><br />

  <div ng-app="myApp">
    <div ng-controller="controller">
      <div>Place your cursor inside the input box and then press TAB</div>
      <input type='text' tag="customer" />

var app = angular.module('myApp', []);

app.controller('controller', ['$scope', '$injector', '$attrs', function($scope, 
$injector, $attrs) {

.directive('tag', function()
    return {
    restrict: 'A',
    link : function(scope, element, attrs)
      // responding to click event 
       element.on("click", function(){
      element.on("blur", function(){
        // console.log(attrs.tag);

/* Styles go here */