JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='myApp'>
    <superhero>Flash</superhero>  
    <br><br>
    <superhero speed>Hulk</superhero>        
</div>

JavaScript

var app = angular.module('myApp', []);
app.directive('superhero', function() {
    return {
        restrict: 'E',
        controller: function($scope) {
            $scope.abilities = [];
            
            this.addStrength = function() {
                console.log('adding strength');                
                $scope.abilities.push('strength');
                console.log($scope.abilities);                
            }
            
            this.addSpeed = function() {
                console.log('adding speed');
                $scope.abilities.push('speed');   
                console.log($scope.abilities);
            }
        },
        link: function(scope, element) {
            element.bind('mouseenter', function() {
                console.log(scope.abilities)
            })
        }        
    }
})

app.directive('speed', function() {
    return {
        require: 'superhero',
        link: function(scope, element, attrs, SuperHeroCtrl) {
            SuperHeroCtrl.addSpeed();
        }
    }
})

app.directive('strength', function() {
    return {
        require: 'superhero',
        link: function(scope, element, attrs, SuperHeroCtrl) {
            SuperHeroCtrl.addStrength();
        }
    }
})