AngularJS controller inheritance

Question

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

    
Base Controller         


        
      

Answer 1

The binding in your fiddle is directly on a property in scope. The inheritance that you need can be achieved by having the data binding on an object in the scope.

http://jsfiddle.net/2Dtyq/

scope.shared = {}    
scope.shared.value = "Something"

Instead of just

scope.value= "Something"

What is happening?
While DerivedController is constructed, the scope being passed in prototypically inherits from the scope of BaseController.
DerivedController's scope object still doesn't have its own property called "value". Therefore it still binds to the property that it got from parent's scope.
Now if you click on the Update In Base button, it will reflect in both the bindings. The moment you click on Update In Derived button, a new property named "value" is created on the DerviedController's scope. Therefore the binding to the parent's value property is broken. Any more clicks on Update In Base doesn't refresh the second data binding.
Putting it in a separate object prevents a new property from being created so the inheritance is still maintained.