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 ng-show="focused">I'm focusing!</div>
    <div ng-hide="focused">I'm not focusing!</div>
    <input on-focus="focused=true" on-blur="focused=false">
</div>

JavaScript

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

app.directive('onFocus', function() {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            console.log('onfocus');
            elm.bind('focus', function() {
                scope.$apply(attrs.onFocus);
            });
        }
    };        
});
app.directive('onBlur', function() {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            elm.bind('blur', function() {
                scope.$apply(attrs.onBlur);
            });
        }
    };        
});

function MyCtrl($scope) {
    
}