JSFiddle - React, Tailwind, and code Playground

by Gabriel Ferraz

HTML

<div ng-app="test">
  <div ng-controller="AppCtrl as app">
    <div ng-controller="ChildCtrl as child">
            <button ng-click="logParent()" style="background: blue; padding: 10px; color: white;">Log from AppCtrl</button>
       <button ng-click="log()" style="background: green; padding: 10px; color: white;">Log from ChildCtrl</button>
    </div>
  </div>
</div>

JavaScript

angular.module('test', [])
.controller('AppCtrl', function ($scope) {
  // define method 'log' on the parent '$scope' obj
  $scope.log = function() {
    console.log("'log' method defined in AppCtrl");
  }
})
.controller('ChildCtrl', function ($scope) {
 	
  // at this point "log" is a method of the parent controller, accessible via "$scope"
  // click "Run" above to see the log
  $scope.log(); 
  
  // here we overwrite the parent's 'log' method
  // function is called via UI button 'click'
  $scope.log = function() {
    console.log("'log' method defined in ChildCtrl");
  }
  
  // since we overwrote the parent method on this controller's scope, 
  // "$scope.log" refers to the method defined above.
  // we can still access the parent's "log" method as such
  $scope.logParent = function() {
   	$scope.$parent.log(); 
 	}  
});