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">
    <button class="btn" ng-click="myModal.show()">Open with defaults</button>
    <br />
    <button class="btn" ng-click="myModal.show({fade:false, slide:false})">Open without effects</button>
    <br />
    <button class="btn" ng-click="myModal.show({backdrop: false, keyboard: false})">Open without backdrop/escape exit</button>
    
    <modal ng-model="myModal" fade="true" slide="true">
        <div class="modal-header">
            <button type="button" class="close" ng-click="myModal.hide()">&times;</button>
            <h3>Login</h3>
        </div>
        <div class="modal-body">
            Username&nbsp; <input type="text" ng-model="username" autofocus>
            <br />
            Password&nbsp; &nbsp;<input type="password" ng-model="password">
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary" ng-click="myModal.hide({fade:false, slide:false})">Close without effects</button>
            <button class="btn" ng-click="myModal.hide()">Close with defaults</button>
       </div>
    </modal>
</div>

JavaScript

angular.module('myApp', []).directive('modal', function() {

    function height($elm) {
        return $elm[0].offsetHeight || $elm.height();
    }

    function linkFn(scope, elm, attrs) {
        var directiveOptions = { 
            ngModel: attrs.ngModel || 'modal',
            backdrop: attrs.backdrop || 'true' === 'true',
            keyboard: attrs.keyboard || 'true' === 'true',
            fade: attrs.fade || 'true' === 'true',
            slide: attrs.slide || 'true' === 'true'
        };
        var $elm = $(elm).addClass('modal hide').css('position','absolute');
        var $backdrop = $('.modal-backdrop');
        var modalController = {};

        //Close modal on escape btn or click (click on backdrop & or keypress on body)
        function closeModalEvent(e) {
            if (e.type=="click" || (e.type=="keyup" && e.which==27)) //27=escape
                modalController.hide();
        }

        //Add modal-backdrop element to body if it doesn't exist
        if ($backdrop.length === 0)
            $backdrop = $('<div class="modal-backdrop"></div>').appendTo('body').hide();

        modalController.show = function(options) {
            var options = angular.extend({}, directiveOptions, options || {});
            var startCss = {'display':'block', top:'50%', opacity:1.0};
            var endCss = {};
            
            if (options.fade) {
                startCss.opacity = 0.0;
                endCss.opacity = 1.0;
            }
            if (options.slide) {
                startCss.top = '-50%';
                endCss.top = '50%';
            }
            if (options.keyboard) {
                $('body').bind('keyup', closeModalEvent);
            }            
            if (options.backdrop) {
                $backdrop.bind('click', closeModalEvent);
                //backdrop doesn't slide, only fade
                if (options.fade) $backdrop.fadeIn();
                else $backdrop.show();
            }
            
           ...