Decorative directives:recreating ng-click

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl" my-click="clickHandler(data)">
    <h1>Hello Plunker!</h1>
    <h2 ng-class="{changeColor: data.selected}">{{data.message}}</h2>
  </body>

</html>

// Code goes here
angular.module('myApp', []);
angular.module('myApp').controller('myCtrl', function($scope) {
  $scope.data = {
    message: "Click me!",
    selected: false
  };
  var originalData = angular.copy($scope.data.message);
  $scope.clickHandler = function(p) {
    if(p.selected) {
      p.message = "Click me again";
    }
    else {
      p.message = originalData;
    }
  }
});

angular.module('myApp').directive('myClick', function($parse) {
  return {
    link: function(scope, el, attrs) {
      var fn = $parse(attrs['myClick']);
      el.on('click', function () {
        scope.$apply(function() {
          scope.data.selected = !scope.data.selected;
          fn(scope);
        });
      });
    }
  }
})

/* Styles go here */
.changeColor {
  color : red;
  font-style : italic;
}