JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<div ng-app="myApp">
  <div ng-controller="ParentCtrl">
    Parent Scope: {{data}}
    <div ng-controller="ChildCtrl as vm">
      Child Scope: {{vm.data}}
      <button ng-click="vm.update(vm.child)">Click Me</button>
    </div>
    
  </div>
</div>

CSS

* {
  font-family: 'Arial', sans-serif;
}

div {
  margin: 8px 0;
}

button {
  display: block;
  margin-top: 20px;
}

JavaScript

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

angular.module('myApp')
.controller('ParentCtrl', function($scope) {
	$scope.data = '';
})

angular.module('myApp')
.controller('ChildCtrl', function($scope, myService) {
	vm = this;
	vm.child = "Henry, Jr."
	vm.update = (data) => {
  	myService.alertFn(data);
    $scope.$parent.data = data;
  };
})

angular.module('myApp')
.service('myService', function() {
	return {
  	alertFn: function(data) {
    	vm.data = data;
    }
  }
})