JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var myApp = angular.module('myApp',[]);

function BaseController($scope) {
    $scope.model={};
    $scope.model.value = "Initial Value";
    $scope.updateValue = function () {
        $scope.model.value = "Value updated from Base";
    };
}

function DerivedController($scope) {
    $scope.updateValue = function () {
        $scope.model.value = "Value updated from Derived";
    };
}