AngularJS Animations with JavaScript

See this JSFiddle: http://jsfiddle.net/5mUsH/3/

I'm trying to do a really simple JavaScript animation in AngularJS and jQuery. (I'm not using CSS animations because I want to support older browsers and also do more complex animations.) The code in the fiddle is from the AngularJS user guide (but slightly simplified): http://docs.angularjs.org/guide/animations

But—it doesn't work! The DOM is updated immediately (without animating). Any ideas? Thanks!

Here is the relevant markup from the JSFiddle:

<div class="sample" ng-show="checked">
  Visible...
</div>

And the JavaScript:

angular.module('App', ['ngAnimate']).animation('.sample', function() {
    return {
        enter : function(element, done) {
            element.css('opacity',0);
            jQuery(element).animate({
                opacity: 1
            }, done);

            // optional onDone or onCancel callback
            // function to handle any post-animation
            // cleanup operations
            return function(isCancelled) {
                if(isCancelled) {
                    jQuery(element).stop();
                }
            }
        },
        leave : function(element, done) {
            element.css('opacity', 1);
            jQuery(element).animate({
                opacity: 0
            }, done);

            // optional onDone or onCancel callback
            // function to handle any post-animation
            // cleanup operations
            return function(isCancelled) {
                if(isCancelled) {
                    jQuery(element).stop();
                }
            }
        },
    }
});