render HTML in angularJS 1.x

I have a directive and I´m replacing IMG urls with img src to display images inline

function message($filter) {

    var directive = {
        restrict: 'EA',

        scope: {
            data: '='
        },

        link: function(scope, elem, attrs) {
            scope.data.content = scope.data.content.replace(/(https?:\/\/\S+(\.png|\.jpeg|\.jpg|\.gif))/g, "<img src='$1' alt=''>");
        },

        template: '<span>{{data.nickname}}:</span> {{data.content}}'

    };

    return directive;
}

but instead of seeing the image inline I´m seeing the HTML tag as text I´m investigating $sce but I´m not sure how to use it inside a directive.