JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <first-directive></first-directive>
    <second-directive></second-directive>
</div>

JavaScript

angular
    .module('app', [])
    .directive('firstDirective', function() {
        return {
            restrict: 'E',
            replace: true,
            template: '<div>first directive: <pre>{{vm}}</pre></div>',
            controller: function() {
                this.foo = 'Hi!';
            },
            controllerAs: 'vm'
        };
    })
    .directive('secondDirective', function(){
        return {
            restrict: 'E',
            replace: true,
            template: '<div>second directive: <pre>{{vm}}</pre></div>',
            controller: function() {
                this.bar = 'There?';
            },
            controllerAs: 'vm'
        };
    });