JSFiddle - React, Tailwind, and code Playground

HTML

<html ng-app="website">
<body ng-controller="MyController">
    <a href='#' ng-click="load()">Click Event</a>
    <a href='#' click-load ng-click="loadData()">Click Directive</a>

</body>
</html>

JavaScript

angular.module('website', []).directive('clickLoad', function($q, $http, $templateCache) {
        return function(scope, element, attrs) {
           scope.loadData = function() {
               $http({method: 'GET', url: 'http://fiddle.jshell.net', cache: true}).then(function(result) {
                        alert('loaded ' + result.data.length + " bytes");
                    });
            }
          };
    });


function MyController($scope, $http, $templateCache) {
    $scope.load = function() {
        $http({method: 'GET', url: 'http://fiddle.jshell.net', cache: true}).then(function(result) {
                        alert('loaded ' + result.data.length + " bytes");
                    });
    }
}