JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="dr" ng-controller="testCtrl">
    <test color1="color1" update-fn="updateFn(msg)"></test>    
</div>

JavaScript

var app = angular.module('dr', []);
app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});
app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        template: "<button ng-click='updateFn({msg:\"Hello World!\"})'>Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});