JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="test">
    <div ng-controller="TheCtrl">
        {{ userInput.test }} (would like it to be updated by typing in input box below)
        <wrapper-directive user-input="userInput" some-condition="true"></wrapper-directive>
    </div>
</div>

JavaScript

angular.module("test", []);
    
    angular.module("test").controller("TheCtrl", function ($scope) {
        $scope.userInput = {
            test: "Test"
        };
    });
    
    angular.module("test").directive("wrapperDirective", function() {
        return {
            "restrict" : "E",
            "scope" : {
                "userInput" : "=",
                "someCondition" : "="
            },
            "template" : "<div ng-if='someCondition'><span>In Wrapper</span><input-directive user-input='userInput'></input-directive></div>"
        }
    });
    
    angular.module("test").directive("inputDirective", function() {
        return {
            "restrict" : "E",
            "scope" : {
                "userInput" : "="           
            },
            "template" : "<div><span>I want this to bind to $scope.userInput.test within the controller</span><input ng-model='userInput.test' /></div>"
        }
    });