JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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