AngularJS: Вставка HTML из строки

Я посмотрел LOT для этого, но я либо не могу найти ответ, либо я его не понимаю. Определенный пример выиграет голосование =)

• У меня есть функция, которая возвращает строку HTML.
• Я не могу изменить функцию.
• Я хочу, чтобы html, представленный строкой, был вставлен в DOM.
• Я рад использовать контроллер, директиву, службу или что-то еще, что работает (и это разумная практика).
• Отказ от ответственности: я плохо разбираюсь в компиляции $.

Вот что я пробовал:

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

function Ctrl ($scope, $compile) {
  $scope.htmlString = htmlString;
}
Ctrl.$inject = ["$scope", "$compile"];

Это не сработало.

Я тоже пробовал это как директиву:

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

angular.module("myApp.directives", [])
  .directive("htmlString", function () {
    return {
      restrict: "E",
      scope: { content: "@" },
      template: "{{ htmlStr(content) }}"
    }
  });

  ... and in my HTML ...

  <html-string content="foo"></html-string>

Справка

Примечание

Я смотрел на них, среди прочего, но не мог заставить его работать.

• AngularJS: Вставка HTML в представление
• AngularJS $http HTML Parser
• angularjs - вставка $compile-d html
• AngularJS не выполняется в HTML, вставленном с document.write()
• Выйти из HTML-текста в директиве AngularJS

Ответы

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

function Ctrl ($scope) {
  var str = "HELLO!";
  $scope.htmlString = htmlString(str);
}
Ctrl.$inject = ["$scope"];

<div ng-bind-html="htmlString"></div>