JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="MainCtrl">
    # Partials: {{partials.length}}<br/>
    <div ng-repeat="partial in partials">
        <div ng-include="partial.name"></div>
   </div>
</div>

CSS

.a0 {
    background-color: green
}
.a1 {
    background-color: LightBlue
}

JavaScript

var app = angular.module('app', []);
app.config(function($controllerProvider, $compileProvider) {
        // see page 12 of:
        //    http://www.slideshare.net/nirkaufman/angularjs-lazy-loading-techniques
        app.lazyController = $controllerProvider.register;
        app.lazyDirective = $compileProvider.directive;
    });

// set of partials
var partials = [];

// store scope & templateCache, so we can dynamically insert partials
var scope, templateCache;

// define main controller
function MainCtrl($scope, $templateCache) {
    $scope.partials = partials;
    
    scope = $scope;
    templateCache = $templateCache;
}

var maxPartials = 3;
var i = 0;

// add controllers, content & directives dynamically:
var timer = setInterval(function() {
    var i = partials.length;
    
    app.lazyDirective('clickMe',
        function () {
            return {
                link : function (scope, element) {
                    element.bind('click', function () {
                        alert('Clicked: ' + element.text());
                    });
                },
            };
        }
    );
    
    // define controller
    var ctrlName = 'partial' + i + 'Ctrl';
    app.lazyController(ctrlName, function($scope) {
        $scope.text = 'hi ' + i;
    });
    
    // add partial template that I have available in string form
    var newPartial = {
        name: 'template' + i,
        content: '<div ng-controller="' + ctrlName + '" class="a' + i + '">' +
        '<input type="text" ng-model="text"></input>'+
        '{{text}} <br/>' + 
        '<button click-me="">Click Me!</button>' +
        '</div> <br/> <br/>'
    };
    partials[i] = newPartial;
    
    // add template and notify angular of the content change
    templateCache.put(partials[i].name, partials[i].content);
    scope.$apply();
    
    // stop timer
    if (partials.length >= maxPartials)  clearInterval(timer);
}, 1000);