<my-custom-element ng-transclude>
  <div>
    <h3>Scope: {[{$ctrl.test}]}</h3>
  </div>
</my-custom-element>

function CustomDirective() {
  return {
   restrict: 'E',
   replace: true,
   controller: MyController,
   controllerAs: '$ctrl',
   transclude: true
  }
}

export function register(ngModule) {
  ngModule.directive('myCustomElement', CustomDirective);
}

const CustomComponent = {
  controller: MyController,
  transclude: true,
  replace: true,
};

export function register(ngModule) {
  ngModule.component('myCustomElement', CustomComponent);
}

export default class MyController {
  constructor() {
    this.test = 'this is just a teststring';
  }
}

const CustomComponent = {
    controller: MyController,
    transclude: true,
    template: '<ng-transclude></ng-transclude>'
};

export function register(ngModule) {
    ngModule.component('myCustomElement', CustomComponent);
}

<my-custom-element>
    <div>
        <h3>Scope: {[{ $parent.$ctrl.test }]}</h3>
    </div>
</my-custom-element>