angularjs directive not rendering brackets

Let's say I have this view:

<table>
    <tbody>
        <tr ng-repeat="event in orderedEvents" ea-trhref="{{event.link}}">
            <td>
                {{event.displayableDate}}
            </td>
            <td>
                <p>{{event.title}}</p>
            </td>
            <td>{{event.placeShort}}</td>
        </tr>
    </tbody>
</table>

And a directive that looks like this (typescript, but this doesn't matter that much):

class TrHrefDirective {
    restrict = "A";
    template = null;
    link = (scope, element, attrs) => {
        var href = attrs.eaTrhref;
        var aStart = '<a href="{0}">'.format(href);
        var aEnd = "</a>";

        angular.forEach(element.find("td"), tdFrame => {
            var td = angular.element(tdFrame);
            var originalHtml = td.html();
            td.html(aStart + originalHtml + aEnd);
        });
    };

    constructor() {
        return this;
    }
}

I want to wrapt the content of every td element in a a-tag with the href from ea-trhref. With my code, that actually works. My problem is: As soon as my Directive is being used angularjs does not replace the {{event.xyz}} with their respective values anymore. It just leaves the double-curly-brackets...

How can I tell angularjs it should continue to render the values?