AngularJS で動的にDOM上に追加したディレクティブをパースさせる方法

以下のようにする。

$compile(el.contents())($scope)

利用例

html

<div ng-controller="asyncDirectiveCtrl as ctrl">
    <button ng-click="ctrl.get1()">失敗</button>
    <button ng-click="ctrl.get2()">成功</button>
    <div class="asyncDirectiveResult"></div>
</div>

javascript

angular.module('demo', []).
    controller('asyncDirectiveCtrl', function($compile, $scope){
        this.get1 = function(){
            return angular.element('.asyncDirectiveResult').html('<hello>Taro</hello>')
        }
        this.get2 = function(){
            var el = this.get1();
            $compile(el.contents())($scope);
        }
    }).
    directive('hello', function($compile){
        return {
            link: function(scope, el, attr){
                el.html('Hello ' + el.text() + ' !')
            }
        }
    })
;

非同期で取得したコンテンツ（markupやmarkdown）内にディレクティブの記述があった場合に有効