AngularJS $compile example

angularjs-$compile.js

function MyDirective ($templateRequest, $compile) {

    var templateBase = '/directives/my_directive/views/';

    var childTemplates = {
        child1: 'child1.html',
        child2: 'child2.html'
    };

    return {
        restrict: 'E',
        scope: {
            child: '='
            value: '='
        },
        compile: function (tElement, tAttrs) {
            return function (scope, iElement, iAttrs) {
               
               //Build template url 
                var templateUrl = templateBase + childTemplates[scope.child];
                //Render template
                $templateRequest(templateUrl, true).then(function(template) {
                    // Set the template as the content of the element.
                    iElement.html(template);
                    // Compile it amd link it to the isolated scope.
                    $compile(iElement.contents())(scope);
                });
                
            };
        }
    };
}

angular.module('MyApp')
    .directive('MyDirective', MyDirective);