JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="myApp">
  <div ng-controller="MyCtrl as ctrl">
    <div ng-view></div>
    <ul>
      <li>{{1+1}}</li>
      <li><my-directive scope-object="{aC:'Goodbye'}"></my-directive></li>
      <li><my-directive scope-object="ctrl.prediction"></my-directive>  </li>
      ab = {{ctrl.prediction.aB}}, ac = {{ctrl.prediction.aC}}
    </ul>
  </div>
</body>

JavaScript

myApp = angular.module('myApp',[]);
myApp.directive('myDirective',function(){
    return {
      restrict:'E',
      scope: {
        scopeObject: '='
      },
      controller: 'DirectiveCtrl',
      controllerAs: 'dirCtrl',
      bindToController: true,
      template: 'aB={{dirCtrl.scopeObject.aB}} aC={{dirCtrl.scopeObject.aC}} <input ng-model="dirCtrl.scopeObject.aB" />'
    };
  }
);

myApp.controller('DirectiveCtrl', function($scope){
    var self = this;
    $scope.$watch(function() {return self.scopeObject}, function (objVal) {
        console.log("watch fired");
        console.log('objVal.aB = ', objVal.aB);
        console.log('objVal.aC = ', objVal.aC);    
    },true);

});

myApp.controller('MyCtrl', function($http) {
    var self = this;
    self.prediction = {};
    self.myFunc = function() {
    
      response = $http.post('http://jsonplaceholder.typicode.com/posts',
        {
          'XXXXX': 'YYYYYYY'
        }
      ).then(function(response) {
        console.log("post responded");
        self.prediction.aB = response.data.id;
        self.prediction.aC = response.data.id+1;
        console.log('self.prediction.aB = ', self.prediction.aB)
        console.log('self.prediction.aC = ', self.prediction.aC)
      })
    }();
  }
);