Переключить редактирование и отображение полей в форме

Прежде всего, я имею в plnkr здесь.

Я пытаюсь создать серию директив, которые поддерживают переключение текста на экран и редактирование внутри формы. Насколько я понимаю, есть аналогичный модуль, такой как xeditable, но нам нужно делать что-то другое по дороге. Поэтому я начал с эксперимента, чтобы начать с чего-то подобного.

Во-первых, я создаю директиву, которая позволяет переключать редактирование/отображение, устанавливая атрибут editEnabled в директиве editableForm. Следующий код не делает ничего особенного, кроме строки сообщения журнала.

function editableForm ($log) {

        var directive = {
            link: link,
            require: ['form'],
            restrict: 'A',
            scope: {
                editEnabled: "&editEnabled"
            }
        };
        return directive;

        function link(scope, element, attrs, controller) {


             //$log.info('editEnabled: ' + scope.editEnabled());
            $log.info('editEnabled: ' + attrs.editEnabled); //this also works


        }
    } //editableForm

Затем я написал следующую директиву для переопределения input тега в html:

 //input directive
    function input($log) {

        var directive = {
            link: link,
            priority: -1000,
            require: ['^?editableForm', '?ngModel'],
            restrict: 'E'
        };
        return directive;

        function link(scope, element, attrs, ngModel) {

            ngModel.$render = function() {
                        if (!ngModel.$viewValue || !ngModel.$viewValue) {
                            return;
                        }
                        element.text(ngModel.$viewValue);
                    };
                $log.info('hello from input');
                $log.info('input ngModel: ' + attrs.ngModel);
                // element.val('Hello');

            scope.$apply(function() {
                            ngModel.$setViewValue('hello');
                            ngModel.$render();
                        });


        }
    } //input

Я пытался показать значение ngModel ввода как текст во input директиве, однако он ничего не делает в моем тестировании. Может ли кто-нибудь определить, где я делаю неправильно? Я хочу заменить каждое поле ввода текстом /html (например, <span>JohnDoe</span> для имени пользователя).

Моя первая попытка ввода - это доказательство концепции. Если это сработает, я продолжу работу над другими тегами, такими как button, select и т.д.