Submitting the modal popUp overriding the data - html

Question

I am trying to create timeline with a create timeline button. If create button is clicked a popUp opens and one need to select any of the item and the item will add one event to the timeline.
Here is the button and timeline 'div' where the new event will be added:
<center><button type="button" class="btn btn-primary" ng-click="showRoutinePopUp()">Let's create routine</button></center>
<section id="cd-timeline" class="cd-container">
<!--<routinepopup></routinepopup>-->
</section>
And here is the popup:
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
And here is the angular code that is apepeding the popUp selected item to timeline :
modalInstance.result.then(function (selectedItem) {
el = $compile('<div class="cd-timeline-block" >' +
'<div class="cd-timeline-img cd-picture">' +
'<img src="img/cd-icon-picture.svg" alt="Picture">' +
'</div>' +
'<div class="cd-timeline-content">' +
'<h2>{{selected}}</h2>' +
'<p>{{selected}}</p>' +
'{{selected}}' +
'<span class="cd-date">{{selected}}</span>' +
'</div>' +
'</div>')($scope);
$scope.selected = selectedItem;
angular.element(document.getElementById('cd-timeline')).append(el);
The problem is whenever a new event is added through Popup, it overrides the previous added event also.
Go through this Plnkr : http://plnkr.co/edit/C5LivW?p=preview

Answer 1

The reason your new event is overwriting the previous event is:
Your selected variable is declared on the same $scope each time, so each item in the list is referencing to the same object, in your case they are all referencing to the last event added.
Some advice: You should rather use the ng-repeat directive to show items in a list.
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
I have updated your plunker to show you an example, its not complete but it shows the wanted behavior.
Here is the updated HTML:
<section class="cd-container">
<div class="cd-timeline-block" data-ng-repeat="event in events">
<div class="cd-timeline-img cd-picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div>
<div class="cd-timeline-content">
<h2>{{event}}</h2>
<p>{{event}}</p>
{{event}}
<span class="cd-date">{{event}}</span>
</div>
</div>
</section>
and the updated JS:
app.controller('appController', function($scope, $uibModal, $log, $compile) {
$scope.events = [];
var count = 0;
console.log('inside controller');
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.showPopUp = function(size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'PopUp.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.events.push(selectedItem);
//angular.element(document.getElementById('cd-timeline')).append(el);
count++;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
});

Answer 2

Better use ng-repeat to show tasks and on modal resolve only push selected task to selectedItems array, now in all your blocks you point to {{selected}} which changes in modal resolve function thats why all your tasks rewrites.