Angular directives not working when dynamically loaded

When an HTML fragment is loaded and compiled by Angular, directives are not being linked

by aalcock

HTML

<script src="http://ci.angularjs.org/job/angular.js-angular-master/ws/build/angular.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container">
    <div class="row">
        <div class="span12">
            <div class="well">
                <a rel="tooltip" title="Bootstrap tooltip" id='tooltip' data-placement="right" tooltip>
                    Ordinary Bootstrap tooltip here
                </a>
            </div>
            <div id="settingsContainer" class="well">
                Will be replaced
            </div>
            <a class="btn" onclick="replace_html()">Replace with dynamic HTML</a>
        </div>
    </div>
</div>

JavaScript

$('#tooltip').tooltip()


var myModule = angular.module('myModule', []);
function MyController($scope) {
    $scope.no = "Yes";
}

console.log("Loading directive into Angular")
myModule.directive('tooltip', function () {
    console.log("Directive factory was executed");
    return {
        restrict:'A',
        link:function postLink(scope, element, attrs) {
            console.log("Directive was linked");
            $(element).tooltip();
        }
    }
});


// Imitate a request that will fill in the element.
function replace_html() {
    html ='<div ng-app="myModule" id="ng-app" ng-controller="MyController">' + 
            'Is Angular running? {{no}} <br>' +
            '<a rel="tooltip" title="This should be a Bootstrap tooltip, but it is not" id="tooltip">' +
            'Bootstrap tooltip should be here' +                    
            '</a>' +
            '</div>'
    var containerElement = $('#settingsContainer');
    containerElement.html(html)
    angular.bootstrap(containerElement, ['myModule']);               
   
}