scope assignment is being automatically updated without being called angularjs - angularjs

Question

I have two scope functions and when i click the button only then will any of them be called but once it is called, i realize that the value of the scope variable automatically updates each time.
$scope.images = [];
$scope.imagesAttached =[];
$scope.takePhoto = function(index) {
if(modalExists === true) {
$scope.modal1.hide();
}
$scope.showSendButton = true;
$scope.attachedImageExists = false;
if($scope.imagesAttached.length > 0) {
$scope.images = $scope.imagesAttached
$scope.attachedImageExists = true;
}
var options = {
destinationType : Camera.DestinationType.FILE_URI,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : false,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
correctOrientation: true
};
// 3
$cordovaCamera.getPicture(options).then(function(imageData) {
// 4
var imagetype;
onImageSuccess(imageData);
function onImageSuccess(fileURI) {
createFileEntry(fileURI);
}
function createFileEntry(fileURI) {
window.resolveLocalFileSystemURL(fileURI, copyFile, fail);
}
// 5
function copyFile(fileEntry) {
var name = fileEntry.fullPath.substr(fileEntry.fullPath.lastIndexOf('/') + 1);
var newName = (new Date()).getTime() + name;
window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(fileSystem2) {
fileEntry.copyTo(
fileSystem2,
newName,
onCopySuccess,
fail
);
}, fail);
}
// 6
function onCopySuccess(entry) {
$scope.$apply(function() {
$scope.modal.remove();
$scope.activeSlide = index;
if(modalExists === false) {
$ionicModal.fromTemplateUrl('image-modal.html', {
scope: $scope,
}).then(function(modal) {
$scope.modal1 = modal;
$scope.modal1.show();
modalExists = true;
$scope.images.push({file: entry.nativeURL, type: $scope.imagelist});
console.log($scope.imagesAttached.length)
console.log($scope.images.length)
});
}
else {
$scope.modal1.show();
$scope.images.push({file: entry.nativeURL, type: $scope.imagelist});
console.log($scope.imagesAttached.length)
console.log($scope.images.length)
}
});
}
function fail(error) {
console.log("fail: " + error.code);
}
}, function(err) {
console.log(err);
});
}
$scope.sendPhoto = function() {
$scope.imagesAttached = angular.copy($scope.images);
}
my image-modal.html page
<script id="image-modal.html" type="text/ng-template">
<div class="modal image-modal transparent">
<ion-header-bar class="bar bar-header bar-dark">
<div class ="row">
<div class ="col">
<label ng-click="closeModal(1)">Cancel</label>
</div>
<div class ="col">
<label ng-click="deleteImage()">Delete</label>
</div>
<div class ="col" id="send-images" ng-show="showSendButton">
<label ng-click="sendtoAttach()">Send</label>
</div>
</div>
</ion-header-bar>
<ion-slide-box on-slide-changed="slideChanged($index)" show-pager="true" active-slide="activeSlide" >
<ion-slide ng-repeat="image in images">
<img ng-src="{{image.file}}" class="fullscreen-image"/>
</ion-slide>
</ion-slide-box>
<div class="row">
<ion-scroll>
<img ng-repeat="image in images" ng-src="{{urlForImage(image.file)}}" class="image-list-thumb" height="50px"/>
</ion-scroll>
<button class="ion-camera" ng-click="takePhoto()"></button>
</div>
</div>
</script>
I have got two buttons Take and Send
when i call takePhoto for the first time and SendPhoto, the value is correct, one image is pushed and the length of my $scope.images and $scope.imagesAttached is 1,
But if i click takePhoto button again, without calling SendPhoto button, both my $scope.images and $scope.imagesAttached length is updated to 2 whereas it should be only $scope.images = 2 while $scope.imagesAttached = 1 since i havent called $scope.sendPhoto yet.
I know angularJS has some double binding stuff with $apply and $digest but not sure how it works and why it is auto binding my scope variables.
Any help appreciated

Answer 1

This has nothing to do with Angular, it is purely JavaScript object references at work.
When you assign $scope.images to $scope.imagesAttached, both variables reference the same object.
Try this instead in your sendPhoto function
$scope.imagesAttached = angular.copy($scope.images)