JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<div ng-app="myapp" ng-controller="mainController as mainCtrl">
	some body text<br>
	<a href="javascript:;" ng-click="mainCtrl.myfunc()">Click Me from body</a>
	<photo photo-src="abc.jpg" caption="This is so Cool" />
</div>

JavaScript

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

app.controller('mainController', function(){
	var vm = this;
	vm.myfunc = myfunc;

	function myfunc(){
		console.log("Log from myfunc");
	}
});

app.directive('photo',function(){
	return {
		restrict: 'E',
		template: '<figure>	<img ng-src="{{photoSrc}}" width="500px">	<figcaption>{{caption}}</figcaption>	<a href="javascript:;" ng-click="mainCtrl.myfunc()">Click Me from directive</a></figure>',
		replace: true,
		scope: {
			caption: '@', 
			photoSrc: '@'
		}
	}
});