I'm facing an issue in my Angular application where changes made to data inside a child controller's form are not being reflected back in the parent array after saving using Restangular. I have tried using debounce to auto-save the data, but it seems that methods like `angular.copy` and `Restangular.copy` are not behaving as expected. Additionally, manually setting the item to the correct index in the array causes the cursor to lose focus in the input field.
Below is a simplified version of the child controller's code. To see the full example, you can check out this JS Bin. Is there a different approach that could be used to address this issue?
$scope.personCopy = angular.copy($scope.person);
// Debounce and auto-save changes
$scope.$watch('personCopy', function(newVal, oldVal) {
if (newVal && newVal != oldVal) {
if (timeout) $timeout.cancel(timeout);
timeout = $timeout(savePerson, 1000);
}
}, true);
var savePerson = function() {
// (In my real app, the following is inside a save callback)
// Method 1: (doesn't work at all)
$scope.person = $scope.personCopy
// Method 2: (works with angular.copy, but not Restangular.copy)
// angular.copy($scope.personCopy, $scope.person);
// Method 3: (works, but cursor loses focus)
// $scope.people[$scope.$index] = $scope.personCopy;
};