Angular directive template not parsing HTML string

Question

I have the following directive template:

https://plnkr.co/edit/IXieg1mA0QDFIPmNd8El?p=preview

app.directive('myObject', function() {
  return{
    restrict: 'E',
    scope: {},
    controller: myControl,
    controllerAs: 'vm',
    bindToController: true,
    template: '<div>vm.name - {{vm.templateObject()}}</div>'
  }

  function myControl(){
    var vm = this;

    vm.name = 'John';

    vm.templateObject = function(){
      var username = '<em>john1234</em>';

      return username;
    }
  }

});

Which should output the template of the directive with the templateObject function returning an HTML of <em>john1234</em>. But I need this HTML to be parsed with the rest of the template.

How can make this HTML be parsed in the directive itself?

Answer 1

Use ng-bind-html instead of regular {{expression}}