Angular JS propagate child scope variable changes to parent scope

Solution 1:

This is due to how prototypal inheritance works.

When you ask for $scope.x in the child controller, it checks to see if x is defined on its scope, and if not, looks for x in the parent scope.

If you assign to the child scope's x property, it only modifies the child scope.

An easy way to deal with this and get the sharing behavior is to use an object or an array.

function ParentCtrl($scope) {
  $scope.model = {x: 5, y: 5};
}

function ChildCtrl($scope) {
  $scope.update = function(x, y) {
    $scope.model.x = x;
    $scope.model.y = y;
  };
}

Here, the changes will be visible in both scopes, because $scope.model will refer to the same object in both parent and child scopes.

John Lindquist has a video on this.

Solution 2:

Another solution that doesn't involve creating a bunch of objects to pass by reference is to create setter functions in the parent controller.

function ParentCtrl($scope) {
  $scope.x = 5;
  $scope.y = 5;

  $scope.setX = function(value) {
    $scope.x = value;
  }

  $scope.setY = function(value) {
    $scope.y = value;
  }
}

function ChildCtrl($scope) {
  $scope.update = function(x, y) {
    $scope.setX(x);
    $scope.setY(y);
  };
}

I find this to be cleaner when it may not make sense to have the data be part of the same object.

You could also go crazy and do something like this in the child:

function ChildCtrl($scope) {
  var superSetX = $scope.setX;
  $scope.setX = function(value) {
    superSetX(value * 2);
  };
  ...
}