JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myController">
        {{file.data}}
        
        <div class="box" ng-click="setExternal('Clicou na div!')">
            Está é uma Div do controller. Clique aqui!
        </div>
        <div class="box" my-directive set-on-click="setExternal(param)">
            Está é a Directive. Clique aqui!
        </div>
    </div>
</div>

CSS

body{
    margin: 0px;
}

.box{
	padding: 25px 0px;  
	border: 2px dashed #bbb;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align: center;
	font: 20pt bold 'Vollkorn';
	color: #bbb;
    margin: 10px 0px;
}

JavaScript

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

app.controller('myController', function($scope) {
	$scope.file = {
		data : "nada!"
	};
    $scope.setExternal = function(data) {
		console.log(data);
		$scope.file.data = data;
	};
});

app.directive('myDirective', function() {
	return {
		restrict : 'A',
		scope : {
			setOnClick : '&'
		},
		link : function(scope, element, attrs) {			
            element.on("click", function() {
                console.log("directive", scope);
                scope.setOnClick({ param: "Clicou na directive!"});
                scope.$apply();
            });
		}
	};
});