You need to message between your scopes, as angular scopes use prototype inheritance. In short if you have a parent scope with a property "foo", and you update "foo" in a child scope, the child scope gets a "new copy" of "foo".
To achieve what you want one can use $scope.$emit()
to send an event updates through the scope hierarchy and $scope.$on()
to receive events. Something like this.
function ParentController($scope, ...) {
$scope.numberOfThings = 5;
// Process 'updateThings' event
$scope.$on('updateThings', function(value) {
$scope.numberOfThings = value;
});
}
...
function ChildController($scope, ...) {
$scope.someCallback = function() {
// Send 'updateThings' up the scope chain.
$scope.$emit('updateThings', 47);
}
}
If you want to do this the other way around, one can push events downward through the scope chain, one can use $scope.$broadcast()
.