My service deals with a complex object retrieved from an API, like this:
{
name: "Foo",
addr: {
street: "123 Acacia Ave",
zip: "10010"
}
}
The initial value is stored in myService.address, and another variable holds a copy of it using
myService.originalAddr = angular.copy(myService.addr);
This setup allows me to reset a form to its original state when needed.
In my directive's controller, I bind a scope property to myService.addr by injecting the service:
$scope.addr = myService.addr;
I believe this establishes two-way binding.
When I execute a function in another directive:
$scope.reset = function(){
myService.addr = angular.copy(myService.originalAddr);
}
The expected result is achieved as myService.addr resets to its original value. However, the bound values in my form do not reset, and $scope.addr retains the edited values. I have tried using
<input type="text" ng-bind="addr.street"/>
and also attempted
<input type="text" ng-model="addr.street"/>
Unfortunately, the form values remain unchanged after editing and are not reset. It appears that angular.copy is breaking the binding. Can you please advise on what I might be doing wrong?