Transclude does not interpolate

Question

I have a directive that transcludes some HTML to provide a faux context menu. The usage is as such:

<div id="my-element">
    My content
    <context-menu get-offset="getOffset($event)">
       <ul>
           <li>
               <a href="" ng-click="action()">{{ label }}</a>
           </li>
       </ul>
    </context-menu>
</div>

This will bind an event listener to #my-element which on right click will show contents of context-menu to whichever offset $scope.getOffset returns.

Everything works, except the interpolated string {{ label }} is not expanded. Let's say the value of $scope.label is 'ABC'. Instead of seeing "ABC", you see "{{ label }}". However, ngClick seems to be bound correctly.

Please see this plunkr for the code & demo: http://plnkr.co/edit/QDVAHkhrfsNpRcjTwCpM?p=preview

Why is this?

Answer 1

The events aren't triggering a $digest cycle. Add this line to the end of showContextMenu():

transcludeScope.$digest();

(You can trigger it using any scope, really)