Создание угловой директивы для повторного использования кода - ошибка синтаксического анализа при создании HTML

Следуя фрагменту кода элемента управления, который я создаю. Этот элемент управления используется в разных местах, и переменные различаются.

Я пытаюсь написать директиву для очистки кода, но получаю ошибку синтаксического анализа, вставляя значения рядом с {{}}.

Новый для углового и не в состоянии указать, что мне не хватает. Пожалуйста помоги.

track-edit - еще одна директива.

Исходный управляющий код:

<div id="text-wrapper">
                    <div track-edit="true" id="Type1Desc_{{t1Card.id}}" class="textbody" ng-blur="SaveDesc('Type1Desc_'+t1Card.id,t1Card.Description,'Type1')">
                        <div>
                            <p><div spellcheck="true"  ng-bind-html="t1Card.OrigDescription|diff:t1Card.Description"></div></p>
                        </div>
                    </div>
                </div>

Код директивы

app.directive('customEditor', function () {
    return {
        restrict: "E",
        scope: {
            fId: "@",
            idAppend: "@",
            className: "@",
            origVal: "@",
            currVal: "@"
        },
        replace: true,
        transclude: false
        template: ' <div id="text-wrapper"><div track-edit="true" id="{{idAppend}}_{{fId}}" ' +
        'class="{{className}}" ><div><p>' +
        '<div spellcheck="true"  ng-bind-html="{{origVal}}|diff:{{currVal}}"></div></p></div></div></div>',
        link: function (scope, element, attrs) {

        }
    }
});

Html после директивы:

 <custom-editor fid="{{t1Card.id}}" idappend="Type1Desc" classname="textbody" ng-blur="SaveLineItemDesc('Type1Desc_'+t1Card.id,t1Card.Description,'Type1')" origVal="{{t1Card.OrigDescription}}" currVal="{{t1Card.Description}}">
 </custom-editor>