angular directive embed and multiple transclude

index.js

app.directive('outer', function(){
    return {
      restrict: 'E',
      controllerAs: 'outer',
      require: 'outer',
      template: '<p>{{outer.hello}}<p ng-transclude="outerInner"></p><p ng-transclude></p></p>',
      scope: true,
      transclude: {
        outerInner: 'inner'
      },
      controller: function(){
        this.sayHello = function(){
          console.log('outer: hello');
        };
        this.hello = "hello outer";
      },
      link: function(scope, element, attrs, outerCtrl){
        element.on('click', function(){
          outerCtrl.sayHello();
        });
      }
    };
  });

app.directive('inner', function(){
    return {
      restrict: 'E',
      template: '<p>{{inner.welcome}}</p>',
      require: ['^outer', 'inner'],
      scope: true,
      controllerAs: 'inner',
      controller: function(){
        this.sayWelcome = function(){
          console.log('inner: welcome');
        };
        this.welcome = "welome inner";
      },
      link: function(scope, element, attrs, ctrls){
        var outerCtrl = ctrls[0];
        var innerCtrl = ctrls[1];
        element.on('click', function(event){
          innerCtrl.sayWelcome();
          outerCtrl.sayHello();
          event.stopPropagation();
        });
      }
    };
  });