How to make danaperino link in AngularJS?

Prompt how to organize a bi-directional conjunction with control of the active (Selected item) with only one view with input fields
Controller:

controllers.controller('popUpConfigCtrl', ['$scope', function ($scope) {
 // Model templates
 $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'},
];
 // The default template
 $scope.template = $scope.templates[0];

 // Model options
 $scope.options = [
 { name: 'Text', value: 1 },
 { name: 'Large text', value: 2 },
 { name: 'Field', value: 3 },
 { name: 'Multiline field', value: 4 },
 { name: 'Button-submit', value: 5 },
];
 // Selected by default
 $scope.selected = $scope.options[0];
 // The model lyrics
 $scope.textElements = [
 {id: '00001', text: 'Enter text', color: '#000'},
 {id: '00002', text: 'Test text', color: '#333'}
];

 // Function to change the template
 $scope.choiceElement = function (e) {
e.the 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;
});
};

 }]);

A view with fields:

<div class="title-config">
<h6>Text</h6>
 <a href class="link-config">Delete</a>
</div>
<div class="form-container">
 <div class="title-form">
 <h6>General settings</h6>
</div>
 <div class="input-row">
<label>Text</label>
 <textarea ng-model="$parent.textElements[0].text"></textarea>
</div>
 <div class="title-form">
 <h6>text Settings</h6>
 </div> 
 <div class="input-row">
<label>Color</label>
 <input type="text" class="color">
</div>
 <div class="input-row slider-i">
<label>Size</label>
 <div slider class="slider">
 <div class="thumb"></div>
</div>
 <input type="text">
</div>
 <div class="input-row">
<label>Font</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>Alignment</label>
<select>
 <option value>Left</option>
 <option value>center</option>
 <option value>Right</option>
</select>
</div>
 <div class="title-form">
<h6>Indent</h6>
 </div> 
 <div class="input-row slider-i">
<label>Bottom</label>
 <div slider class="slider">
 <div class="thumb"></div>
</div>
 <input type="text">
</div>
</div>

The items you can 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="Name*">
</div>
 <div class="line input" data-type="input" ng-click="choiceElement($event)">
 <input type="text" placeholder="Phone*">
</div>
 <div class="line submit" data-type="submit" ng-click="choiceElement($event)">
 <button>Call me</button>
</div>
 </div>