AngularJS Data Binding with Getter and Setter Service Method -

i'm struggling understand how data binding , service works togheter in angularjs. i've 1 controller , 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 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 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 info ...">                 </div>                  <button ng-click="modify()" class="btn btn-default">modify</button>                 <button ng-click="print()" class="btn btn-default">print</button>             </form> 

if modify view, overriding value in form, , click on print button, console.log return me values store in services(into private variable _data), , excpected.

then if click on modify button, , again print button, time cosole.log shows me modified values saved on private var _data in service. behavior expected.

the strange thing appear when after did interaction webapp, again modify value in form , click on print button without clicking on modify button. values stored in service modified if never click modify button , never call shareddata.setprop() method.

with method angular.copy(), expected create new variable(a new copy of variable), , if modify "$scoped" variable expected impossible modify directly private _data variable in service.

why happens? there method modify , access private variable in service defined method?

thanks in advance.

best regard, alessandro.

after click setprop, object in shareddata , in scope same object.

to solve this, call line again after call "modify()":

$scope.modify = function() {    shareddata.setprop("first_prop",$scope.data)    // grab copy of first_prop object, or else same reference.    $scope.data = angular.copy(shareddata.getprop("first_prop")); } 

there other ways solve this, such in setprop, pass angular.copy($scope.data), etc.

always aware when pass objects in javascript, pass reference, not value.