How can I automatically compile all directive dependency?

Lets say I make two Angular directives:

Foo:

<div> Hello World! </div>

Bar:

<foo></foo>

I now want to test Bar. My test will look something along the lines of:

describe("Bar Test", function () {
    beforeEach(
        angular.mock.module('module')
    );

    var $rootscope,
    $compile,
    element,
    scope;

    beforeEach(inject(['$injector', function ($injector) {
        $rootscope = $injector.get('$rootScope');
        $compile = $injector.get('$compile');
        scope = $rootscope.$new();
        element = $compile(angular.element('<bar></bar>'))(scope);

        var $httpBackend = $injector.get('$httpBackend');
        var html = require('text!path/to/bar.html');
        $httpBackend.whenGET(/bar.html/).respond(html);
        scope.$apply();
        $httpBackend.flush();
    }]));

    it("test bar", function(){
        expect(element.find("foo").text).toEqual("Hello World!");
    });
});

Now this example is a little silly as the Bar test is really testing Foo, but when you can imagine the directives getting more complex and the behavior becomes more intertwined (ie lets say Foo creates an object on Bar's scope)

This example also wont work, as Foo never got compiled, so Bar's inner html will just be <foo></foo>, with no Hello World inside.

My question is: How do I get my unit test to automatically compile all dependent directives in my unit test?

I suspect the answer might be 'you shouldn't do that because then its not a unit test', so alternatively, how do I explicitly allow specific directives to get compiled?