JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">

    <div ng-controller="first">
        <h3>FIRST</h3> begin typing here: Tom, Dick, or Harry
        </br>
       <br/><input type="text" ng-model="data1.text" />
    </div>
    
    <div ng-controller="second">
    <h3>SECOND</h3> The results of what you entered in the input field in "FIRST" need to be displayed below the same way they display if you entered in that same term in the input field in SECOND (this is the primary goal).
    
        </br></br>
        <input type="search" id="search" class="form-control"  ng-model="data2.text" ng-change="searchText = data2.text">

    <ul>
        <li ng-repeat='person in people | filter:searchText'> {{person.name}} </li>
    </ul>

        
    </div>
    
</div>

JavaScript

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

app.factory("sharedScope", function($rootScope) {
    var scope = $rootScope.$new(true);
    scope.data = {};
    return scope;
});

app.controller("first", function($scope, sharedScope) {
    $scope.data1 = sharedScope.data;
});
               
app.controller("second", function($scope, sharedScope) {
    $scope.data2 = sharedScope.data;
    
    $scope.people = [
        {
            name:'Tom'
        },
        {
            name:'Dick'
        },
        {
            name:'Harry'
        }

    ]
});