JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<div ng-app="app" ng-controller="appController as $ctrl">
  <uppercase data-string-val="$ctrl.value"></uppercase>
  <lowercase data-string-val="$ctrl.value"></lowercase>
</div>

JavaScript

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

angular
	.module('app')
  .controller('appController',function($scope, $timeout){
    var $ctrl = this;
    $timeout(function(){
      $ctrl.value = 'Async value'
    }, 1000);        
  })
  .component('uppercase', {
  	bindings : {
    	stringVal : '<'
    },
  	controller: function($scope){
    
    	this.$onChanges = function(obj){
        if(obj.stringVal.currentValue){
					this.upperVal = this.stringVal.toUpperCase();    
         }
      };
    },
    template : `
    	<div>Uppercase value: {{$ctrl.upperVal}}</div>
      `
  })
  .component('lowercase', {
  	bindings : {
    	stringVal : '<'
    },
  	controller: function($scope){    
    	this.$onChanges = function(obj){
        if(obj.stringVal.currentValue){
					this.upperVal = this.stringVal.toLowerCase();    
         }
      };
    },
    template : `
    	<div>Lowercase value: {{$ctrl.upperVal}}</div>
      `
  })