Как передать HTML в директиву angular?

Я пытаюсь создать директиву angular с шаблоном, но я также не хочу терять HTML внутри div. Например, вот как я хотел бы вызвать свою директиву из HTML:

<div my-dir>
  <div class="contents-i-want-to-keep"></div>
</div>

Тогда есть моя директива:

app.directive('myDir', [ '$compile', function($compile) {
return {
    restrict: 'E',
    link: function(scope, iElement, iAttrs){
        // assigning things from iAttrs to scope goes here
    },
    scope: '@',
    replace: false,
    templateUrl: 'myDir.html'
};
}]);

а затем myDir.html, где я определяю новый элемент:

<div class="example" style="background: blue; height: 30px; width: 30px"></div>

Даже когда я устанавливаю для replace значение false, я теряю внутреннее содержимое div-i-want-to-keep - мое понимание угловых документов заключалось в том, что это будет добавлено после моего шаблона. Есть ли способ сохранить это (возможно, с помощью моей функции связывания?), Чтобы результат был

<div class="example" style="background: blue; height: 30px; width: 30px">
     <div class="contents-i-want-to-keep"></div>
</div>

Спасибо!