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 value='vm.obj.value'></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.value}}</p>",
  controller: function(){
        this.$onInit = function(){}
        this.$onChanges = function(obj){
            console.log('second-child changed one-way bindings', obj)
        }
  },
  controllerAs: 'vm',
  bindings: {
    value: '<'
  }
})