AngularJS：文字列からHTMLを挿入する

質問

私はこのために多くのことを探したが、私は答えを見つけることができないか、または私はそれを理解していない。 具体的な例は、投票に勝つでしょう =)

• 私はHTML文字列を返す関数を持っています。
• 関数を変更することができません。
• 文字列で表されるhtmlをDOMに挿入してほしい。
• コントローラ、ディレクティブ、サービスなど、動作するもの（それなりに良いもの）であれば何でも良いのですが。
• 免責事項：私は$compileをよく理解していません。

試してみたのはこんな感じです。

// 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>

ヘルプは？

ノート

// 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>