Angular+JQ+Bootstrap

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    value = {{value}}
    <br />
    <button ng-click="add()">Click me to add a directive that changes value</button>
</div>

JavaScript

var app = angular.module('myApp', []);

function MyCtrl($scope, $element, $compile) {
    $scope.value = 3;
    
    $scope.add = function() {
        $element.append($compile('<my-directive></my-directive')($scope));
    };
}
                    
app.directive('myDirective', function() {
    return {
        restrict: 'E',
        link: function(scope, elm, attrs) {
            scope.value = 443532;
        }
    };
});