javascript - 前のタグでコンテンツを強調表示する... AngularJSの方法?

Question

データベースからテキスト ログ データ レコードを取得し、フォーマットを保持するために事前タグでレンダリングする単純な AngularJS アプリがあります。ログ コンテンツに追加のマークアップを使用して強調表示を追加しようとすると、正しくレンダリングできませんでした。代わりに、コンテンツ内にプレーン テキストとしてマークアップを追加します。私が間違っていることは何ですか？例: http://jsfiddle.net/afSsf/

HTML:

     <div ng-controller="MyCtrl">
          <pre>{{logdata}}</pre>
     </div>

JavaScript:

     var myApp = angular.module('myApp',[]);

     myApp.factory('Data', function() {
           var Data = {};
           Data.log = "ERROR - error message";
           Data.log = Data.log.replace(/ERROR/mg, '<span style="color:#f00">ERROR</span>')
           return Data;
     });

     function MyCtrl($scope, Data) {
          $scope.logdata = Data.log;
     }

結果：

     <span style="color:#f00">ERROR</span> - error message