AngularJS: заменить шаблон элемента на фокус

У меня возникла следующая проблема: мой клиент хочет, чтобы моя угловая директива полностью меняла внешний вид. Это означает, что для меня мне нужно будет полностью заменить шаблон, когда пользователь нажмет этот элемент. Я не смог найти ответ в Интернете, поэтому решил спросить.

Я попытался передать шаблон "несфокусированный" в разделе шаблона директивы и связать с событием фокуса в ссылке следующим образом:

   post: function (scope, element, attrs) {

        element.bind('focus',function(event){
          element.html('<span..../span>');
          $compile(element)(scope);
        });
   }

Но он вызывает ошибку (входной шаблон "несфокусированный")

Uncaught Error: [$compile:multidir] Multiple directives 
[ngModel, ngModel] asking for 'ngModel' controller on: <input....

Решение должно быть совместимо с Angular 1.2, которое я должен использовать.