directive that response to event and get its custom attribute

<!DOCTYPE html>
<html>

<head>
  <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>
</head>

<body>
  <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 />
  
  </p>

  <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" />
    
    </div>
  </div>
</body>

</html>

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(){
        //console.log(attrs.tag);
      });
      
      
      element.on("blur", function(){
        // console.log(attrs.tag);
        alert(attrs.tag);
      });
      
    }
  }
});

/* Styles go here */