AngularJS has a DOM based controller inheritance, as mentioned in the angular Docs.

<div ng-controller="BaseController">
    <p>Base Controller Value: {{value}}</p>
    <button ng-click="updateValue()">Update In Base</button>
    <div ng-controller="DerivedController">
        <p>Derived Controller Value: {{value}}</p>
        <button ng-click="updateValue()">Update In Derived</button>
    </div>
</div>

The scope variable "value" is present only in the BaseController. Based on this, while changing the value at a method in BaseController or DerivedController, I want both the values need to be updated. But only the individual scope variable gets updated.

Here is a fiddle demonstrating the same example: http://jsfiddle.net/6df6S/1/

How can changes at a level be made to propagate to the immediate child and immediate parent of the current scope.

We can implement this by using

$scope.$watch

Is there any way to do this without using it or any such watchers?

Edit 1:

By using $scope.$watch here is what I meant

$scope.$watch("value", function () {
   $scope.$broadcast("childChangeListener"); //Downwards to all children scopes
   $scope.$emit("parentChangeListener"); //Upwards to all parent scopes
});

I was looking for ways in which the value would get updated across all scopes without using such a mechanism.

angularjs angularjs-scope
Edit
Report