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">
    <div modal="modalUrl"></div>
    
    <button ng-click="modalOpen('templ.html')">open</button>
    
    <script type="text/ng-template" id="templ.html">
        Hello!
    </script>
</div>

CSS

.ui-modal { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ui-modal .back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2) }
.ui-modal .back.fade-enter-setup { -webkit-transition: opacity 0.5s ease-in-out; opacity: 0; }
.ui-modal .back.fade-enter-start { opacity: 1; }
.ui-modal .content { position: absolute; left: 50px; top: 50px; }

JavaScript

angular.module('myApp', []).directive('modal', function($compile, $http, $templateCache) {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            var expression = attrs['modal'];
            
            elm.addClass('ui-modal');

            scope.$watch(expression, function( newValue, oldValue ) {
                if (newValue == oldValue) return;
                elm.removeClass('hide');
                $http.get(newValue, { cache: $templateCache }).success(function (response) {
                    var back = elm.append('<div class="back fade-enter-setup"></div>');
                    var content = elm.append('<div class="content">' + response + '</div>');
                    setTimeout(function () {
                        back.addClass('fade-enter-start');
                    }, 10);
                    back.bind('click', function () {
                        console.log('close');
                    });
                    $compile(elm.contents())(scope);
                });
            });
            
            scope.close = function () {
                console.log('close');
            };
        }
    };
});
        

function MyCtrl($scope) {
    
    $scope.modalOpen = function (url) {
        $scope.modalUrl = url;
    }
}