Динамическая привязка ng-модели внутри директивы

Я пытаюсь создать настраиваемый компонент, который использует динамическую модель ng-модели внутри директивы.

В качестве примера я мог бы вызывать разные компоненты, например:

<custom-dir ng-model="domainModel1"></custom-dir>
<custom-dir ng-model="domainModel2"></custom-dir>

С директивой типа:

app.directive('customDir', function() {
  return {
    restrict: 'EA',
    require: '^ngModel',
    scope: {
      ngModel: '=dirValue',
    },
    template: '<input ng-model="dirValue" />',
    link: function(scope, element, attrs, ctrl) {
      scope.dirValue = 'New';
    }
  };
});

Идея состоит в том, что текстовое поле из директивы изменится, если модель изменится, а наоборот.

Дело в том, что я пробовал разные подходы без каких-либо успехов, вы можете проверить это здесь: http://plnkr.co/edit/7MzDJsP8ZJ59nASjz31g?p=preview В этом примере я ' m ожидая иметь значение "Новое" в обоих входах, так как я меняю модель из директивы и является двунаправленной оценкой (=). Но почему-то не связано правильно.: (

Я буду очень благодарен, если кто-то расскажет об этом. Спасибо заранее!

Ответ 1