Why an undefined is not a function with Angular directive to close Bootstrap modal

Question

As a newbie to Angularjs I copied a directive from here: Closing Twitter Bootstrap Modal From Angular Controller, to be able to close a bootstrap modal from a controller, and in my implementation I'm getting an undefined is not a function error. (http://jsfiddle.net/jlamont/7f6dH/6/)

Here's the html

<div ng:app="app">
 <div>
  <ul><li><a href='#' data-toggle="modal" data-target="#loginModal">Login</a></li></ul>

  <div id='loginModal' class='modal fade' myModal ng-controller="LoginDialogController" tabindex="-2" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
   <div class="modal-dialog">
    <div class="modal-content">        
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" ng-click="cancel()">x</button>
       <h3>Login MyApp</h3>
     </div>
     <div class="modal-body">
       <form name="login_form">
        <alert ng-repeat="alert in alerts" type="danger" close="closeAlert($index)">{{alert.msg}}</alert>
      <p><input type="text" class="span3" ng-model="login.user_email"  placeholder="Email" required></p>
      <p><input type="password" class="span3" ng-model='login.password' placeholder="Password" required></p>
      <p><button type="submit" class="btn btn-primary" ng-click="ok()">Sign in</button>
        <a href="#">Forgot Password?</a>
      </p>
       </form>
     </div>
     <div class="modal-footer">
       My.com?
       <a href="#" class="btn btn-primary">Register</a>
     </div>
    </div>
   </div>
  </div>         
 </div>
</div>

Here's the js

angular.module("app", []).directive('myModal', function() {
 return {
  restrict: 'A',
  scope:{},
  link: function(scope, element, attr) {
    scope.dismiss = function() {
     element.modal('hide');
    };
  }
   } 
});

function LoginDialogController($scope){
 $scope.ok = function(){
  $scope.dismiss();
 };
}