AngularJS: templateUrl defers controller construction, dependent code breaks

So, I just started using AngularJS, and so far it seems perfect, except for one little grasp. Let's say I have two directives, one of which requires the other, for example:

angular.module('components', [])
    .directive('outer', function() {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            scope: {},
            link: function(scope) { ... },
            controller: function($scope) { ... },
            templateUrl: 'outer.html' // Note this
        };
    })
    .directive('inner', function() {
        return {
            require: '^outer', // And this
            restrict: 'E',
            ...
            link: function(scope, element, attrs, outerCtrl) { ... },
            templateUrl: 'inner.html'
        };
    });

something like this is used in HTML:

<outer>
    <inner></inner>
</outer>

If outer.htmlloading up inner.html, then there is no problem. <outer>It is converted correctly and it is assigned a scope and a controller, and it <inner>receives this controller just fine.

If the templates are loaded in the reverse order, however , it is <inner>connected before the <outer>s controller has been created , and it fails with the error message "Error: no controller: external .

inner.html, , outer.html , . , inline outer s (.. template templateUrl), , .

- , templateUrl , ? , templateUrl template, , .

, , ; .