JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<div ng-app="myApp" ng-controller="MyController">
    <my-customer customer="naomi" on-test="onTest()" on-my-test="onMyTest()"></my-customer>
	<hr>
	<my-customer customer="igor" on-test="onTest()" on-my-test="onMyTest()"></my-customer>	
</div>

JavaScript

var myApp = angular.module('myApp', []);
		
myApp.controller('MyController', ['$scope', function($scope) {		
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };

    $scope.onTest = function() {
        alert('testFunction');
    };
    $scope.onMyTest = function() {
        alert('onMyTestFunction im Controller');
    };

}]);
		
myApp.directive('myCustomer', function($compile) {
    return {
        restrict: 'AE',
        terminal: true,
        scope: {
            customer: '=',
            onTest: '&',
            onMyTest: '&'
        },
        // templateUrl: 'myCustomer.html'
        template: 'Name: <b>{{customer.name}}</b> Address: <b>{{customer.address}}</b>' +
        '<button name="button" ng-click="onTest()">Click me</button>' +
        '<button name="button" ng-click="onMyTest()">Click me</button>', 
        link: function(scope, elem, attrs) {
            $compile(elem.contents())(scope.$new());
        } 
    };
});