AngularJS "Compile Html" directive. Compile a HTML partial loaded from external service.

CompileHtml.js

/* 
 * $scope.test = 'hello world';
 * $scope.content = '<div>{{test | uppercase}}</div>';
 *
 * <div compile-html="content"></div>
 */

angular.module('directives').directive('compileHtml', function ($compile) {
    return function(scope, element, attr) {
        var unregister = scope.$watch(attr.compileHtml, function (value) {
            value = value || '';
            if (value) {
                element.html($compile(value)(scope));
            } else {
                element.html(value);
            }
        });
    };
});