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 ng-model="userInput.test" 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" : {
                "ngModel" : "=",
                "someCondition" : "="
            },
            "template" : "<div ng-if='someCondition'><span>In Wrapper</span><input-directive ng-model='userInput.test'></input-directive></div>",
            "controller": function($scope) {
                
                $scope.userInput = {
                    test: $scope.ngModel   
                }
                
                $scope.$watch('userInput.test', function(newTest) {
                  $scope.ngModel = newTest;    
                });
            }
        }
    });
    
    angular.module("test").directive("inputDirective", function() {
        return {
            "restrict" : "E",
            "scope" : {
                "ngModel" : "="           
            },
            "template" : "<div><span>I want this to bind to $scope.userInput.test within the controller</span><input ng-model='userInput.test' /></div>",
            "controller": function($scope) {
                $scope.userInput = {
                    test: $scope.ngModel   
                }
                $scope.$watch('userInput.test', function(newTest) {
                  $scope.ngModel = newTest;    
                });
            }
        }
    });