JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <person name="John"></person>
    <person name="Mike"></person>
</div>

JavaScript

var app = angular.module('myApp', ['moduleB']);
var moduleB = angular.module('moduleB', []);

app.controller('MainCtrl', function ($scope) {
    $scope.name = 'World';
});

app.directive('person', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="person">Person name: {{ name }}</div>',
        scope: {
            name: '@'
        }
    };
});

moduleB.directive('person', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="personB">The name is {{ name }}</div>',
        scope: {
            name: '@'
        }
    };
});