JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<body ng-app="App">
    <!-- Include template in templateCache AUTOMATICALLY -->
    <script type="text/ng-template" id="auto.tpl.html">
        <span style="background-color:yellow">{{title}}</span>        
    </script>
    
    <dir tpl-id="auto.tpl.html" title="Automatic"></dir>
    <dir tpl-id="manual.tpl.html" title="Manual"></dir>
</body>

JavaScript

angular.module('App',[])
.directive('dir',['$templateCache','$compile',function($templateCache,$compile){
    return {
        restrict:'E',
        scope:true,
        link:function($scope, iElement, attrs){
            //Include template in templateCache MANUALLY
            $templateCache.put('manual.tpl.html','<span style="background-color:red">{{title}}</span>');
            //----------------------------            
            
            $scope.title = attrs['title'];
            $compile($templateCache.get(attrs['tplId']))($scope,function(cElement){
                iElement.replaceWith(cElement);                
            });
        }
    };
}]);