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', function ($scope) {
        
    $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
    };
        
        $scope.showCustomer = function($event) {
          angular.element($event.currentTarget).next().html("<div my-customer></div>");
        };
}])
    .directive('myCustomer', function () {
    return {
        template: 'Name: {{customer.name}} Address: {{customer.address}}'
    };
});