JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="docsSimpleDirective">
    <div ng-controller="Controller">
        <button ng-click="showCustomer($event)">click to see the customer</button>
        <div></div>
    </div>
</div>

JavaScript

angular.module('docsSimpleDirective', [])
    .controller('Controller', ['$scope', '$compile', function ($scope, $compile) {
        
    $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
    };
        
        $scope.showCustomer = function($event) {
            var element = document.querySelectorAll('[ng-controller=Controller] div');
           var tpl = $compile( "<div my-customer=''></div>" )( $scope );
            element[0].appendChild(tpl[0]);
        };
}])
    .directive('myCustomer', function () {
    return {
        template: 'Name: {{customer.name}} Address: {{customer.address}}'
    };
});