Angular directive/child directive transclude inside ng-repeat
<p>The problem is that child directive binds to parent however syntax <code>{{name}}</code> gets ignored by <code>ng-repeat</code>. What would be the right way achieving this?</p>

<p><strong>HTML (Main/child directive)</strong></p>

<pre><code>&lt;compact-select
    no-item-selected-text="Add a Customer"
    no-item-selected-icon="fa-user"
    search-placeholder="Type a customer name"
    cs-model="customer"
    cs-items="contacts"
&gt;
    &lt;display-item-template&gt;
        &lt;span&gt;{{name}}&lt;/span&gt;
        or
        &lt;span&gt;{{item.name}}&lt;/span&gt;
    &lt;/display-item-template&gt;
&lt;/compact-select&gt;
</code></pre>

<p><strong>Directive</strong></p>

<pre><code>angular.module('core').directive('compactSelect', [function($timeout) {
    return {
        templateUrl : 'modules/core/views/components/compact-select-tpl.html',
        bindToController: true,
        transclude: true,
        scope: {
            noItemSelectedText: '@',
            noItemSelectedIcon: '@',
            csModel: '=',
            csItems: '=csItems'
        },
        controllerAs : 'ctrl',
        controller : function($scope) {

        }
    };
}]).directive('displayItemTemplate', function($timeout) {
    return {
        require: '^compactSelect',
        restrict: 'E'
    }
});
</code></pre>

<p><strong>Directive Template (modules/core/views/components/compact-select-tpl.html)</strong></p>

<pre><code>&lt;div class="compact-select-repeater-box" style="" &gt;
    &lt;div ng-transclude ng-repeat="item in ctrl.csItems | filter:searchParam" class="compact-select-repeater" ng-class="ctrl.getHighlightedClass(item)" ng-click="ctrl.itemSelected(item)"&gt;
        &lt;span&gt;{{item.name}}&lt;/span&gt;
        &lt;span&gt;{{item.id}}&lt;/span&gt;
    &lt;/div&gt;
    &lt;div style="position:absolute;bottom:0"&gt;
        &lt;a href="#"&gt;+ Click here to add customer {{ctrl.message}}&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>I can see that</strong></p>

<pre><code>&lt;span&gt;{{item.name}}&lt;/span&gt;
&lt;span&gt;{{item.id}}&lt;/span&gt;
</code></pre>

<p><strong>Gets replaced with</strong></p>

<pre><code>&lt;span&gt;&lt;/span&gt;
or
&lt;span&gt;{{item.name}}&lt;/span&gt;
</code></pre>

<p><strong>and not with</strong> </p>

<pre><code>&lt;span&gt;{{name}}&lt;/span&gt;
or
&lt;span&gt;{{item.name}}&lt;/span&gt;
</code></pre>

<p><strong>Question:</strong> How do I get <code>ng-repeat</code> to respect html bindings syntax from child directive? Or is there is another way to achieve this? </p>