JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="myController">

    <input type="text" ng-model="myVar" /> -> {{myVar}}<br/>
    <button ng-click="setToDirective()">Set testVar (aVar)</button>

    <my-directive directive-var="toDirective" b-var="testFunc(aValue)"> </my-directive>
</div>

JavaScript

var myApp = angular.module("myApp", []);

function myController($scope) {
    
    $scope.myVar = null;
    $scope.toDirective = {someString: ""};
    
    $scope.setToDirective = function() {
        $scope.toDirective = {someString: $scope.myVar};
        console.log("Updated toDirective: ",$scope.toDirective);
    }
    
    $scope.testFunc = function(someObject) {
        console.log("myController.testFunc: ",someObject);
    };        
}

myApp
    .directive("myDirective", function() {
        return {
            restrict: 'E',
            scope: {
                directiveVar: '=',
                bVar: '&'
            },
            controller: function($scope, $attrs) {
                $scope.test = [];
            
                $scope.$watch("directiveVar", function(newValue, oldValue, scope) {
                   
                    if(angular.isDefined(newValue) && newValue !== null) {
                        console.log("(directive: myDirective): aVar has changed!");

                        newValue.fromDirective = true;                
                        $scope.test.push(newValue);
            
                        // Doesn't work?            
                        $scope.bVar($scope.directiveVar);
                    }            
                });             
            }
        }            
    })
;