Angular: template only directive 14357945

http://angularjs.org/

HTML

<script src="//code.angularjs.org/1.2.1/angular-sanitize.js"></script>
<div ng-controller="MyCtrl">
 
  <div bind-html-compile="textVar"></div>
</div>

JavaScript

var myApp = angular.module('myApp', ['ngSanitize','angular-bind-html-compile']);

function MyCtrl($scope) {
    $scope.value = { hello: "Hello", world: "World!" }
    $scope.textVar = "Hi There! <complex value='value'></complex>"
}

myApp.directive('complex', function () {
  return {
    restrict: 'E',
    scope: {
      value: '='
    },
      template: '<div>{{value.hello}} {{value.world}}</div>'
  };
});

(function () {
    'use strict';

    var module = angular.module('angular-bind-html-compile', []);

    module.directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                });
            }
        };
    }]);
}());