close button in bootstrap-modal - angularjs

Question

I have a bootstrap modal. On pressing close button, the value of the array is getting changed but it shouldn't.
controller.js
$scope.open = function(){
var modalInstance = $modal.open({
animation: true,
templateUrl: 'views/view1.html',
controller: 'controller2',
resolve: {
items: function(){
return $scope.array;
}
}
});
modalInstance.result.then(function (changed_array){
$scope.array = changed_array;
},function(){
// no change
});
};
code for second controller
angular.module('storagewebApp').controller('controller2',function($scope, $modalInstance, items) {
$scope.array = items;
$scope.ok = function(){
$modalInstance.close($scope.array);
};
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
};
});
view2.html
<div class="modal-header">
<h4 class="modal-title">Set threshold</h4>
</div>
<div class="modal-body">
<div class="form-group" align="left">
<div> E:</div> <input type="text" ng-model="array[0]">
<div> M:</div><input type="text" ng-model="array[1]">
<div>T:</div><input type="text" ng-model="array[2]">
<div>F: </div><input type="text" ng-model="array[3]">
<div> I:</div><input type="text" ng-model="array[4]">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" ng-click="cancel()">Close</button>
<button type="button" class="btn btn-primary" ng-click="ok()">Save</button>
</div>
</div>
The values are changed via input box but on pressing close button values should not be sent to the first controller, but on clicking close button value of changed array is passed to first controller.

Answer 1

This behaviour is a common AngularJS/JavaScript mistake. When you instantiate your modal controller you are passing a reference of your array. Then inside of your modal controller you manipulate that reference, even if you don't pass it back.
When you write:
$scope.array = items
What happends in memory is that $scope.array points to the same location as items. When you modify in any way $scope.array's object you are modifying items also.
As a solution you need to deep copy your initial array into the new one, in this way creating a new object and reference. AngularJS has an inbuilt function that does this: https://docs.angularjs.org/api/ng/function/angular.copy
angular.copy
See this plunkr for example: http://plnkr.co/edit/W6EYUwQ1K1YAnfnJ2r4a?p=preview

Answer 2

You should create a new scope for the modal window. Like this:
var modalScope = angular.extend(
$scope.$new(), {
val1ToPassToModal: $scope.originalValue1,
val2ToPassToModal: $scope.originalValue2,
});
$modal.open({
templateUrl: '…',
controller: '…',
scope: modalScope,
resolve: {
…
}
});
Of course if you don't want to pass new values to the modal window, you can write just:
scope: $scope.$new().