Как сделать двунаправленню связку в AngularJS?

Question

[Роман Огарков]

Подскажите как организовать двунаправленную связку с возможностью управления активным (Выбранным элементом) имея только одну вьюху с полями ввода
Контроллер:

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;
			});
		};

	}]);

Вьюшка с полями:

<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>

Элементы которые можно выбирать:

<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>