Update parent scope variable in AngularJS Update parent scope variable in AngularJS angularjs angularjs

Update parent scope variable in AngularJS


You need to use an object (not a primitive) in the parent scope and then you will be able to update it directly from the child scope

Parent:

app.controller('ctrlParent',function($scope){    $scope.parentprimitive = "someprimitive";    $scope.parentobj = {};    $scope.parentobj.parentproperty = "someproperty";});

Child:

app.controller('ctrlChild',function($scope){    $scope.parentprimitive = "this will NOT modify the parent"; //new child scope variable    $scope.parentobj.parentproperty = "this WILL modify the parent";});

Working demo: http://jsfiddle.net/sh0ber/xxNxj/

See What are the nuances of scope prototypal / prototypical inheritance in AngularJS?


There is one more way to do this task and to not use the $scope.$parent variable.

Just prepare a method for changing the value in parent scope and use it in child one. Like this:

app.controller('ctrlParent',function($scope) {  $scope.simpleValue = 'x';  $scope.changeSimpleValue = function(newVal) {    $scope.simpleValue = newVal;  };});app.controller('ctrlChild',function($scope){    $scope.changeSimpleValue('y');});

It also works and give you more control over the value changes.

You can then also call the method even in HTML like: <a ng-click="changeSimpleValue('y')" href="#">click me!</a>.


This also works (but not sure whether this follows best practice or not)

app.controller('ctrlParent',function($scope) {    $scope.simpleValue = 'x';});app.controller('ctrlChild',function($scope){    $scope.$parent.simpleValue = 'y';});