Why angularjs change variables that are different? - html

Question

I am getting an ajax data from api and saving it to a variable. And I have to "edit and save" or "edit and cancel" changes on this data. I am using ng-model to show and edit this data.
Here is my script:
function getData() {
$http({
method: 'POST',
url: API + '/api/Educations/UserEducations',
data: {}
}).then(function successCallback(response) {
vm.UserData = response.data;
vm.CachedUserData = response.data;
})
}
And here is my html:
<div ng-repeat="education in editEducationsCtrl.UserData">
<div>{{education.SchoolName}}</div>
<input type="text" ng-model="education.SchoolName">
<button ng-click="editEducationsCtrl.saveChanges()">Save</button>
<button ng-click="editEducationsCtrl.cancelChanges()">Cancel</button>
</div>
When user clicked cancel button, I want to write html cached data.
But,
When I try to access vm.CachedUserData variable, I am seeing this cached data has already changed with new value of vm.UserData... How? I have checked my code there is no function access CachedUserData variable. Even I changed variable name to unique name but result is same.
I want to save first data in a variable. But angular changes both of them. Is 2 way databinding change all variables that connected the same ajax data?

Answer 1

I recommend you to use angular.copy() to bind the data you want to cache:
vm.UserData = response.data;
vm.CachedUserData = angular.copy(response.data);

Answer 2

= in JavaScript does not clone the variable, it creates another pointer on it. That means you can handle your variable by using both vm.UserData and vm.CachedUserData.
It seems you want to clone your variable, so:
If it is an array:
...
}).then(function successCallback(response) {
vm.UserData = response.data.splice(0);
vm.CachedUserData = response.data.splice(0);
})
...
If it is an object:
var newObject = jQuery.extend({}, oldObject); if you have JQuery
obj = JSON.parse(JSON.stringify(o)); without JQuery
Here is a good link for cloning objects in JS.