Compile order of parent and child directives in AngularJS

angularDirectiveCompileOrder.js

/*
      1. compile methods of all directives, run in order
      2. controller
      3. pre-link
      4. (all actions of children directives)
      5. post-link (AKA regular `link` function)
*/

var app = angular.module('app',[]);

app.directive('bigPoppa', function($q){
    return {
        restrict: 'E',
        controller: function($scope){ console.log('bigPoppa controller'); },
        compile: function(scope, el) {
            console.log('bigPoppa compile');
            return {
                pre:  function(){ console.log('bigPoppa pre'); },
                post: function(){ console.log('bigPoppa post'); }
            };
        }
    }
});

app.directive('babyBird', function(){
    return {
        restrict: 'E',
        controller: function(){ console.log('babyBird controller'); },
        compile: function(scope, el) {
            console.log('babyBird compile');
            return {
                pre:  function(){ console.log('babyBird pre'); },
                post: function(){ console.log('babyBird post'); }
            };
        }
    }
});

console.log(''); // blank line

The output is:

bigPoppa compile
babyBird compile
bigPoppa controller
bigPoppa pre
babyBird controller
babyBird pre
babyBird post
bigPoppa post