How to make bidirectional binding in AngularJS?

Question

JavaScript

Tell me how to organize a bidirectional link with the ability to control the active (Selected element) having only one view with input fields
Controller:

controllers.controller('popUpConfigCtrl', ['$scope', function ($scope) {
    // Модель шаблонов
    $scope.templates = [
      { name: 'container', url: 'templates/widgets/add-pop-up/config/settings.html'},
      { name: 'text', url: 'templates/widgets/add-pop-up/config/text.html'},
      { name: 'input', url: 'templates/widgets/add-pop-up/config/input.html'},
      { name: 'submit', url: 'templates/widgets/add-pop-up/config/submit.html'},
    ];
    // Шаблон по умолчанию
    $scope.template = $scope.templates[0];

    // Модель вариантов
    $scope.options = [
      { name: 'Текст', value: 1 },
      { name: 'Большой текст', value: 2 },
      { name: 'Поле', value: 3 },
      { name: 'Многострочное поле', value: 4 },
      { name: 'Кнопка отправить', value: 5 },
    ];
    // Выбранный вариант по умолчанию
    $scope.selected = $scope.options[0];
    // Модель текстов
    $scope.textElements = [
      {id: '00001', text: 'Введите текст', color: '#000'},
      {id: '00002', text: 'Тестовый текст', color: '#333'}
    ];

    // Функция смены шаблона
    $scope.choiceElement = function (e) {
      e.stopPropagation();
      var type = e.currentTarget.dataset.type;
      var id = e.currentTarget.dataset.id;

      angular.forEach($scope.templates, function (val) {
        if (type === val.name)
          $scope.template = val;
      });
    };

  }]);

View with fields:

<div class="title-config">
  <h6>Текст</h6>
  <a href="" class="link-config">Удалить</a>
</div>
<div class="form-container">
  <div class="title-form">
    <h6>Общие настройки</h6>
  </div>
  <div class="input-row">
    <label>Текст</label>
    <textarea ng-model="$parent.textElements[0].text"></textarea>
  </div>
  <div class="title-form">
    <h6>Настройки текста</h6>
  </div>	
  <div class="input-row">
    <label>Цвет</label>
    <input type="text" class="color">
  </div>
  <div class="input-row slider-i">
    <label>Размер</label>
    <div slider class="slider">
      <div class="thumb"></div>
    </div>
    <input type="text">
  </div>
  <div class="input-row">
    <label>Шрифт</label>
    <select>
      <option value="">Arial</option>
      <option value="">Tahoma</option>
      <option value="">Verdana</option>
      <option value="">Times New Roman</option>
    </select>
  </div>
  <div class="input-row">
    <label>Выравнивание</label>
    <select>
      <option value="">Слева</option>
      <option value="">По центру</option>
      <option value="">Справа</option>
    </select>
  </div>
  <div class="title-form">
    <h6>Отступ</h6>
  </div>	
  <div class="input-row slider-i">
    <label>Снизу</label>
    <div slider class="slider">
      <div class="thumb"></div>
    </div>
    <input type="text">
  </div>
</div>

Items to choose from:

<div class="widget pop-up" data-type="container" ng-click="choiceElement($event)">
          <a href="" class="close"></a>
          <div class="line text" data-type="text" data-id="00001" ng-click="choiceElement($event)" ng-bind="textElements[0].text"></div>
          <div class="line text" data-type="text" data-id="00002" ng-click="choiceElement($event)" ng-bind="textElements[1].text"></div>
          <div class="line input" data-type="input" ng-click="choiceElement($event)">
            <input type="text" placeholder="Имя*">
          </div>
          <div class="line input" data-type="input" ng-click="choiceElement($event)">
            <input type="text" placeholder="Телефон*">
          </div>
          <div class="line submit" data-type="submit" ng-click="choiceElement($event)">
            <button>Позвони мне</button>
          </div>
        </div>