JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <parent-component></parent-component>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.5.6/angular.min.js"></script>
<style>
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body { background: #eee; margin: 0; padding: 25px; }

JavaScript

var parentComponent = {
	template: `
  	<div>
    	<pre>Parent Object: {{ $ctrl.user | json }}</pre>
    	<a href="" ng-click="$ctrl.changeUser();">
      	Change user (this will call $onChanges in child)
      </a>
    	<child-component user="$ctrl.user">
      </child-component>
    </div>
  `,
  controller: function () {
    this.$onInit = function () {
    	this.user = {
      	name: 'Todd Motto',
        location: 'England, UK'
      };
    };
    this.changeUser = function () {
    	this.user = {
      	name: 'Tom Delonge',
        location: 'California, USA'
      };
    };
  }
};

var childComponent = {
  bindings: {
  	user: '<'
  },
  template: `
  	<div>
      <input type="text" ng-model="$ctrl.user.name">
    </div>
  `,
  controller: function () {
    this.$onChanges = function (changes) {
    	if (changes.user) {
        this.user = Object.assign({}, changes.user.currentValue);
      }
    };
  }
};

angular
	.module('app', [])
  .component('parentComponent', parentComponent)
	.component('childComponent', childComponent);