JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div ng-controller="Ctrl">
        <p>{{ temp }}</p>
        <my-template></my-template>
    </div>
    
    <!-- my-template.html -->
    <script type="text/ng-template" id="my-template.html">
        <button ng-click="test(blah)">Click</button>
        <button ng-click="test(anotherBlah)">Click</button>
        <p>{{ temp }}</p>
    </script>
</div>

JavaScript

angular.module('app', [])
    .controller('Ctrl', function Ctrl1($scope,  $rootScope, BlahFactory, tempFactory) {
        BlahFactory.setValue('another blah');
        $scope.temp = tempFactory.getValue();
    })
    .constant('blah', 'blah')
    .constant('temp', 'temp')
    .factory('BlahFactory', function() {
        var blah = {
            value: 'blah'
        };
        
        blah.setValue = function(val) {
          this.value = val;
        };
        
        blah.getValue = function() {
            return this.value;
        };
        
        return blah;
    })
    .factory('tempFactory', function() {
        var temp = {
            value: 'tempest'
        };
        
        temp.setValue = function(val) {
          this.value = val;
        };
        
        temp.getValue = function() {
            return this.value;
        };
        
        return temp;
    })
    .directive('myTemplate', function() {
        return {
            restrict: 'E',
            templateUrl: 'my-template.html',
            scope: {},
            controller: ["$scope", "blah", "BlahFactory", "tempFactory", function($scope, blah, BlahFactory, tempFactory) {
                
                $scope.blah = blah;
                $scope.anotherBlah = BlahFactory.getValue();
                $scope.temp = "test";
                $scope.test = function(arg) {
                    console.log(arg);
                    tempFactory.setValue(arg);
                    $scope.temp = arg;
                }
            }]
        };
    });