angularjs-order-of-compile

Displays the order in which elements are compiled in angular-js

HTML

<div ng-app="MyApp" ng-controller="MyController" ng-csp>
    <my-test>
        inner-ngRepeat: <span ng-repeat="val in vals">{{time()}}&nbsp;&nbsp;</span>
    </my-test>
</div>

CSS

* { word-wrap: break-word; }

JavaScript

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

app.controller('MyController', ['$scope', function ($scope) {
    $scope.vals = [];
    for (var i=0; i<200; ++i) {
        $scope.vals.push(i);
    }
    
    $scope.time = function () {
        return (new Date()).getMilliseconds();
    };
    
    $scope.log = function (name) {
        console.log(name || '', $scope.time());
    };
}]);

app.directive('myTest', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<div class="outer"><h1>outer-directive: {{time()}}</h1><div ng-transclude></div></div>',
        link: function (scope, elem, attr) {
            scope.time('outer-directive:');
        },
    };
});