ng-bind-html - get image via filter

I'm currently working on a module where users can enter text into a text-area, along with some image-tags which have the following format:

ii[5ae71206|100|100]ii.

This is how I 'm showing the text entered:

<span ng-bind-html="localeCache[item.sysName][editLocale]['text1'] | imageFilter"></span>

The "imageFilter"-filter is supposed to replace my custom tag from the text with an <img>, so ii[5ae71206|100|100]ii becomes:

<img src="path-to-file-with-image-id-5ae71206" 
     style="max-width:100px;max-height:100px;">

The source code for my filter is as follows:

define(
    ['angularAMD', 'docService']
    , function(angularAMD){
        angularAMD.filter('imageFilter', function($rootScope, DocAdminService){
            return function(text) {

                var regExImgTag = /ii\[(.*?)]ii/g;
                var regExImg = /ii\[.*?\]ii/;
                var imageTags = regExImgTag.exec(text);

                if(imageTags !== null){
                    var tag = imageTags[1];
                    var parts = tag.split('|');
                    var imgTag = parts[0];
                    var width = parts[1];
                    var height = parts[2];

                   var imgString = '<img ng-src="' + $rootScope.path_to_REST_Service + imgTag + '" style="max-width:' + width + 'px; max-height:' + height + 'px;">';
                   var textNew = text.replace(regExImg, imgString);
                   console.log(textNew);
                    return (textNew);
                    });
                }
                else{
                    return text;
                }
            };
        });
    }
);

The filter DOES return the correct string, but the view isn't rendering the image. When I'm just entering some text without my custom image-tag, everything is working as intended. Any ideas?