AngularJS Data Binding with Getter and Setter Service Method - angularjs

Question

I'm struggling to understand how data binding and Service works togheter in AngularJS.
I've 1 controller and 1 service.
My service:
myAppServices.factory('SharedData',['$http',function($http){
var _data = {
"first_prop" :{
"name": "first_prop",
"info": "infofirst_prop"
},
"second_prop" :{
"name": "second_prop",
"info": "infosecond_prop"
}
};
return {
getProp: function (name) {
return _data[name];
},
setProp: function (name,value) {
_data[name] = value;
}
};
}])
My controller code:
webAppControllers.controller('FirstCtrl', ['$scope', '$http','SharedData',
function ($scope, $http,SharedData) {
$scope.data = angular.copy(SharedData.getProp("first_prop"))
$scope.print = function()
{
console.log(SharedData.getProp("first_prop"));
}
$scope.modify = function()
{
SharedData.setProp("first_prop",$scope.data)
}
}
]);
And this is my view:
<form role="form">
<div class="form-group">
<label for="nome">Name</label>
<input type="text" ng-model="data.name" class="form-control" id="name" placeholder="Modify the name...">
</div>
<div class="form-group">
<label for="info">Info</label>
<input type="text" ng-model="data.info" class="form-control" id="info" placeholder="Modify the info ...">
</div>
<button ng-click="modify()" class="btn btn-default">Modify</button>
<button ng-click="print()" class="btn btn-default">Print</button>
</form>
If i modify the view, overriding value in the form, and then i click on print button, console.log return me values store in services(into private variable _data), and this is what i excpected.
Then if i click on modify button, and again print button, this time cosole.log shows me modified values that was saved on private var _data in my service. Also this behavior is expected.
The strange thing appear when after i did this interaction with my webapp, i again modify value in the form and click on print button without clicking on modify button. Values stored in service are modified even if i never click modify button and so i never call SharedData.setProp() method.
With the method angular.copy(), i expected to create new variable(a new copy of a variable), and so if i modify this "$scoped" variable i expected it was impossible modify directly private _data variable in my service.
Why this happens? Are there a method to modify and access private variable in service only by some defined method?
Thanks in advance.
Best regard,
Alessandro.

Answer 1

After you click setProp, the object in SharedData and in the scope is the same object.
To solve this, call this line again after you call "modify()":
$scope.modify = function()
{
SharedData.setProp("first_prop",$scope.data)
// grab another copy of the first_prop object, or else its the same reference.
$scope.data = angular.copy(SharedData.getProp("first_prop"));
}
There are other ways to solve this, such as in setProp, pass angular.copy($scope.data), etc.
Always be aware that when you pass objects in javascript, the pass by reference, not by value.