Probleme beim Erzielen von Suchfilterergebnissen über gemeinsam genutzte Bereiche zwischen Controllern

Question

Kurz gesagt, versuche ich, den Text in einem Suchfeld einzugeben, das einem Controller in einer Ansicht zugeordnet ist, um die Suchergebnisse in einer völlig anderen Ansicht anzuzeigen Regler.

https://jsfiddle.net/fk8j8s7z/2/

Die Ergebnisse welchem ​​Namen Sie in das Eingabefeld im „First View“ eingeben muss in der „zweiten VIEW“ angezeigt werden (darunter Eingabefeld ist) auf die gleiche Weise sie angezeigt werden würde, wenn Sie eingegeben unter dem gleichen Namen im Eingabefeld der "ZWEITEN ANSICHT" (dies ist das primäre Ziel).

Bitte beachten Sie, dass die gemeinsame 2-Wege-Datenbindung zwischen den beiden Eingabefeldern NICHT NOTWENDIG IST. Ich habe es nur als Experiment/Hack/Dirty-Way benutzt, um zu versuchen, das zu erreichen, was ich will, weil ich keinen besseren Weg kenne! Wenn einer von euch das primäre Ziel erreichen kann, ohne die 2-Wege-Datenbindung zwischen den beiden Eingabefeldern, die am meisten bevorzugt würde, wäre ich sehr dankbar! Vielen Dank im Voraus!

HTML/VIEW

<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 ever name you enter in the input field in "FIRST VIEW" needs to be displayed below the same way it would display if you entered in that same name in the input field in "SECOND VIEW" (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> 

JS

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' 
     } 

    ] 
}); 

Answer 1

einfach die Filter in ng-repeat auf gleiches Modellobjekt wie ng-model am Eingang

ändern

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

verwendet entsprechen

To

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