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="child.logParent()" style="background: blue; padding: 10px; color: white;">Log from AppCtrl</button>
       <button ng-click="child.log()" style="background: green; padding: 10px; color: white;">Log from ChildCtrl</button>
    </div>
  </div>
</div>

JavaScript

angular.module('test', [])
.controller('AppCtrl', function () {
  var vm = this;
  vm.log = function() {
    console.log('this is AppCtrl')
  }
})
.controller('ChildCtrl', function ($scope) {
  var vm = this;
  
    // accesses the parent "log" method
  vm.logParent = function() {
  	$scope.$parent.app.log();
  }
  
  // 'log' is defined as a member of this conroller, not its $scope
  vm.log = function() {
  	console.log('this is ChildCtrl')
  }
});