JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<parent></parent>

JavaScript

angular.module('test', [])
.component('parent', {
  template: "	<first-child bind='vm.obj'></first-child>\
							<second-child bind='vm.obj'></second-child>\
						",
  controller: function(){
    this.obj = {value: 0};
    this.$onInit = function(){}
	},
  controllerAs: 'vm',
  bindings: {}
})
.component('firstChild', {
	template: " <button ng-click='vm.plus()'>+</button>\
							<button ng-click='vm.minus()'>-</button>\
						",
  controller: function(){
    
    this.plus = function(){
    	this.bind.value++;
  	}
    
    this.minus = function(){
    	this.bind.value--;
  	}
		
    this.$onInit = function(){}
		
    this.$onChanges = function(obj){
  		console.log('first-child changed one-way bindings', obj)
		}
	},
  controllerAs: 'vm',
  bindings: {
  	bind: '<'
  }
})
.component('secondChild', {
  template: "<p>{{vm.bind.value}}</p>",
  controller: function(){
		this.$onInit = function(){}
		this.$onChanges = function(obj){
			console.log('second-child changed one-way bindings', obj)
		}
  },
  controllerAs: 'vm',
  bindings: {
    bind: '<'
  }
})