Angular.js processing - child directives in a specific order

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<div ng-app="myApp">
    <div foo-parent>
        <div foo run="3"></div>
        <div foo run="1"></div>
        <div foo run="2"></div>
    </div>
</div>

JavaScript

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

app.directive('fooParent', function() {
    var foos = [];
    return {
        restrict: 'A',
        controller: ['$scope', '$element', '$attrs', '$transclude', function($scope, $element, $attrs, $transclude) {
            this.addFoo = function(runOrder, element) {
                runOrder = parseInt(runOrder);
                foos.push({
                    run: 0+runOrder,
                    element: element
                });
            };
        }],
        link: function(scope, element, attrs) {
            foos.sort(function(a, b) {
                return a.run - b.run;
            });
            // process all children here
            angular.forEach(foos, function(foo) {
                console.log(foo.run);
                foo.element[0].innerHTML = foo.run;
            });
        }
    };
});

app.directive('foo', function() {
    return {
        restrict: 'A',
        require: '^fooParent',
        link: function(scope, element, attrs, fooParent) {
            fooParent.addFoo(attrs.run, element);
        }
    };
});