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" on-click="mainCtrl.myfunc()" />
</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="onClick()">Click Me from directive</a></figure>',
        replace: true,
        scope: {
            caption: '@',
            photoSrc: '@',
            onClick: '&'
        }
    }
});