Passing HTML to a template inside Angular directive

Question

I need the HTML in newValue to work but it seems to just spit out escaped charaters

.directive('ngLookup', function () {
    return {
        restrict: 'A',
        scope : {
            text : '='
        },
        template: '{{newValue}}',
        link: function (scope, elem, attrs) {
            scope.newValue = scope.text.replace(/test/g,'<a href="javascript:;">test</a>');                
        }
    }
})

My solution using the answer below:

.directive('ngLookup', function ($compile) {
    return {
        restrict: 'EA',
        scope : {
            text : '='
        },
        link: function (scope, elem, attrs) {
            var txt = '<span>'+scope.text.replace(/test/g,'<a href="javascript:;">test</a>')+"</span>";
            var newElement = $compile(txt)(scope);
            elem.replaceWith(newElement);
        }
    }
})

Answer 1

You will have to compile the HTML yourself with the $compile -Service. Do something like:

.directive('ngLookup', function ($compile) {
  return {
    restrict: 'A',
    scope : {
        text : '='
    },
    link: function (scope, elem, attrs) {
        var newElement = $compile('<a href="javascript:;">test</a>')(scope);
        elem.replaceWith(newElement);
    }
  }
})