Почему директива ng-class компилируется после моих пользовательских директив

Ссылка на plnkr, например, объясняется ниже: http://plnkr.co/edit/oYvwHnAIvFb4rUqqwsz3?p=preview

Привет, я не понимаю, почему угловой компилирует мой код таким образом, и вам нужна помощь, чтобы понять, почему это делается. У меня есть внешняя директива, которая делает ng-repeat on и array и создает новую директиву для каждого элемента массива. Обтекание этой внутренней директивы - это div, к которому привязан ng-класс.

Проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы ng-класс применялся к обертке div перед вызовом функции директивной ссылки, но это не так. Контроллер и функция связи всех вложенных директив скомпилированы до того, как вызываются какие-либо из функций оболочки ng-класса. Вы можете увидеть пример того, о каком времени говорить в plnkr, который я связал выше (проверьте консоль, чтобы увидеть порядок, в котором вещи печатаются). Заказ печати, который я хочу, это следующее:

adding class to inner directive  1
Inner - Controller undefined
Inner - Link 1
adding class to inner directive  2
Inner - Controller undefined
Inner - Link 2
Inner - Controller undefined
...

Любая помощь в понимании этого/его компиляции в том порядке, в котором я нуждаюсь, была бы замечательной.

соответствующий код: html

<div bn-outer>
      <div ng-repeat="a in arr">
        <div  ng-class="classFunction(a)">
          <span bn-inner ng-model="model" ng-init="model=a">

            directive: {{a}}

          </span>  
        </div>

      </div>
    </div>

угловая

    // Create an application module for our demo.
    var app = angular.module( "Demo", [] );

    app.directive(
        "bnOuter",
        function() {
            function Controller( $scope ) {
                console.log( "Outer - Controller" );
                $scope.arr = [1,2,3,4,5,6];
                $scope.classFunction = function(int){
                  console.log("adding class to inner directive ", int);
                };
            }
            function link( $scope, element, attributes, controller ) {
                console.log( "Outer - Link" );
            }
            // Return directive configuration.
            return({
                controller: Controller,
                link: link
            });
        }
    );

    app.directive(
        "bnInner",
        function() {
            function Controller( $scope ) {
                console.log( "Inner - Controller", $scope.model );
            }
            function link( $scope, element, attributes, controller ) {
                console.log( "Inner - Link", $scope.model );
            }
            // Return directive configuration.
            return({
                controller: Controller,
                link: link
            });
        }
    );

Благодарю!