JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="StackOverflow">
  
  <div ng-controller="ParentController">
    
    Parent Counter: {{parentCounter}}<br />
    
    <div ng-controller="ChildController">
      Child Counter: {{childCounter}}<br />
      <a href="javascript:void(0)"
         ng-click="increaseCounters()">Increase Counters</a>
    </div><!-- END ChildController -->
    
  </div><!-- END ParentController -->
  
</div><!-- END StackOverflow app -->

JavaScript

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

function ParentController($scope) {
 $scope.parentCounter = 5;
}

function ChildController($scope) {
  $scope.childCounter = $scope.parentCounter;
  $scope.increaseCounters = function() {
    console.log('-------------------------------------');
    console.log('parent before: ' + $scope.parentCounter);
    console.log('child before: ' + $scope.childCounter);
    ++$scope.parentCounter;
    ++$scope.childCounter;
    console.log('parent after: ' + $scope.parentCounter);
    console.log('child after: ' + $scope.childCounter);
  };
}