JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app="myApp" ng-controller="test">
    <div id="test" ng-init="snippets = ['snippet1.html','snippet2.html']">
        <my-template snippets="snippets"></my-template>
    </div>
    <script type="text/ng-template" id="snippet1.html">
        <div>Here is Snippet one</div>
    </script>
    <script type="text/ng-template" id="snippet2.html">
        <div>Here is Snippet two</div>
    </script>
</div>

JavaScript

angular.module('myApp', [])
.controller('test',function(){})
    .directive("myTemplate", function ($templateCache, $compile) {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            snippets: '='
        },
        link: function(scope, element, attrs){
            console.log(scope.snippets);
            var str = '';
            angular.forEach(scope.snippets, function(val, index){
                //creating new element inside angularjs
                element.append($compile($templateCache.get(val))(scope));
            });
        }
    };
});