AngularJS directive with `replace: true` doesn't work in unit test

I've the following directive:

.directive('myContainer', function() {
    return {
        restrict: 'E',
        scope: {
        },
        replace: true,
        transclude: true,
        template: '<section ng-transclude></section>',
        compile: function() {
            console.log('compile');

            return {
                pre: function() {
                    console.log('pre-link');
                },
                post: function() {
                    console.log('post-link');
                }
            };
        },
        controller: function() {
            console.log('controller')
        }
    };
})

Also the unit test for that:

describe('Container', function () {

    var element, scope;

    beforeEach(inject(function($rootScope, $compile) {
        element = angular.element(
            '<my-container>' +
            '   Foo' +
            '</my-container>'
        );

        scope = $rootScope; // I also tried $rootScope.$new()

        $compile(element)(scope);
        scope.$digest();
    }))

    it('should be replaced by a `section` tag', function() {
        expect(element[0].tagName).toBe('SECTION');
    })
})

The test runner tells me:

Running "karma:tests" (karma) task
INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Linux)]: Connected on socket 1XZDEfFUCHhoCoH7a5LR with id 14712662
..
PhantomJS 1.9.8 (Linux) Container should be replaced by a `section` tag FAILED
    Expected 'MY-CONTAINER' to be 'SECTION'.
        at [...]

Why isn't the tag my-container replaced by a section tag? And why aren't any of the console.log(...) are executed? When I do the same manually in the browser it works.