A pattern that comes up a lot in Angular is substituting an angular component into a string when it’s being rendered.

For example, replacing a user ID with a link to the user and avatar.

It’s only a few lines to do, but needs to be done in the directive at compile time.

.directive("foo", ['$compile', function($compile){
    return {
        templateUrl: "./components/foo/foo.html",
        controller: require('./components/foo/foo.js'),
        replace: true,
        restrict: "A",
        link: function(scope, element, attrs){
            if(scope.notification.data.title && scope.notification.data.title.indexOf("tagged-user") > -1){
                var compiledHtml = $compile(scope.notification.data.title)(scope);
                element.find(".post-body-inner-text").html(compiledHtml);
            }
            else{
                element.find(".post-body-inner-text").html(scope.notification.data.title);
            }
        }
    }
}])

Note the injection of $compile, which compiles the string and injects the new components.

Also note, the target container is

<span class="post-body-inner-text"></span>

(As referenced in the link function)

 

This is an unsafe injection angle, which is part of the reason you have to jump through some hoops. This notification data is sanitized server side before it hits our Angular app.