Угловой компонент обертки принимает дополнительные директивы

У меня есть директива, которая выглядит примерно так:

.directive('textInput', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: false,
    compile: function(element, attrs) {
      var html =
      '<div class="form-group">' +
        '<label>{{ \'' + attrs.label + '\' | translate }}</label>' +
        '<input type="text" class="form-control input-sm" placeholder="' + attrs.placeholder +
        '" ng-model="' + attrs.ngModel + '"' + attrs.directives + '>' +
      '</div>';

      var newElem = $(html);
      element.replaceWith(newElem);

      return function (scope, element, attrs, controller) { };
    }
  };
})

Обратите внимание, что атрибут directives представляет собой строку, которая добавляет дополнительную информацию об атрибутах (например, информацию о подсказке)

Я преобразовал его в 1,5 component но я не могу сделать то же самое с определением directives.

.component('textInput', {
  bindings: {
    label: '@',
    placeholder: '@',
    directives: '<',
    ngModel: '='
  },
  require: {
    ngModelCtrl: 'ngModel'
  },
  template:
    '<div class="form-group">' +
      '<label ng-if="$ctrl.label">{{$ctrl.label | translate }}</label>' +
      '<input' +
        ' type="text"' +
        ' class="form-control input-sm"' +
        ' placeholder="{{$ctrl.placeholder}}"' +
        ' ng-model="$ctrl.ngModel"' +
        ' {{$ctrl.directives}}>' +
    '</div>'
})

<text-input directives="tooltip='foobar'"></text-input>

Как передать строку в элемент <text-input/> таким образом, чтобы базовый шаблон получал правильную информацию?