Angular: Replacing text with Templates

want to replace certain letters (A,B,C,...) of a larger text with span tags which i css into nice symbols. Since I later reuse these tags I created an angular template directive

HTML

<div ng-app="foo">
  <div ng-controller="bar">
    <h1 ng-class="{A:'blue'}['A']">Text</h1><!-- Should be blue -->
    <div bind-html-compile="text | symbolify"></div><!-- Removing this line lets the rest work -->
    <h3>Legend</h3>
    <div ng-repeat="kind in ['A', 'B', 'C', 'D']">
      <symbol kind="kind"></symbol>
    </div>
  </div>
</div>

CSS

span {
  height: 16px;
  width: 16px;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

JavaScript

angular.module('foo', [])

  // the directive with template
  .directive('symbol', function() {
    return {
      restrict: 'E',
      replace: true,
      template: '<span ng-class="{A:\'blue\',B:\'red\',C:\'green\',D:\'yellow\'}[kind]">{{kind}}</span>',
      scope: {
        kind: '='
      }
    };
  })

  // the filter
  .filter('symbolify', ['$sce', function($sce) {
    return function(text) {
      text = text.replace(/[ABCD]/g, '<symbol kind="\'$&\'"></symbol>');
      return $sce.trustAsHtml(text);
    }
  }])
  
	// provider of text with symbols A, B, C, D
  .controller('bar', ['$scope', function($scope) {
    $scope.text = "Lorem ipsum dolor sit amet, A consectetur adipiscing elit. Nullam pretium B tellus a nisl blandit tristique. Vestibulum laoreet D pulvinar ante ac finibus. Fusce nisi mauris, pharetra B imperdiet dui eget, C rutrum tincidunt libero. Quisque pharetra nisl dictum, egestas sem sed, malesuada ex. D Suspendisse placerat faucibus tempor. donec pulvinar risus nunc, id venenatis tortor A sodales ac."
  }])
  
  // bind-html-compile from https://github.com/incuna/angular-bind-html-compile
  .directive('bindHtmlCompile', ['$compile', function($compile) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        scope.$watch(function() {
          return scope.$eval(attrs.bindHtmlCompile);
        }, function(value) {
          // In case value is a TrustedValueHolderType, sometimes it
          // needs to be explicitly called into a string in order to
          // get the HTML string.
          element.html(value && value.toString());
          // If scope is provided use it, otherwise use parent scope
          var compileScope = scope;
          if (attrs.bindHtmlScope) {
            compileScope = scope.$eval(attrs.bindHtmlScope);
          }
          $compile(element.contents())(compileScope);
        });
      }
    };
  }]);