如何使用 AngularJS 将 output 获取到另一个页面

Question

I Create two controller one is parent and another one is child i want to create form all code of form in parent html and when i click on submit button output will Show on Child page only output will show on child page.

这是我的 Controller

var myApp = angular.module("myApp", []);
myApp.controller("nameCtrl", ['$scope', function ($scope) {

    $scope.userData = "";
    $scope.getData = function (user) {
        $scope.userData = angular.copy(user);
    };
    $scope.$watch('userData', function (newValue) {
        $scope.$broadcast('nameChanged', newValue);
        console.log(userData);
    });
}]);

myApp.controller('ChildController', ['$scope', function ($scope) {
    $scope.$on('nameChanged', function (event, value) {
        $scope.userData = value;
    });
}]);

这是我的父母 html

 <div ng-controller="nameCtrl">
        <div style="border: 1px solid black;">
            <form>
                First Name:<input type="text" ng-model="user.fname" /><br /><br />
                Last Name:<input type="text" ng-model="user.lname" /><br /><br />
                Address :<input type="text" ng-model="user.adress" /><br /><br />

                <input type="button" value="SUBMIT" ng-click="getData(user)" />

            </form>
        </div>
        <br /><br />
        <br /><br />

        <div style="border: 1px solid black;"> 
            <div data-ng-controller="ChildController">
                <p>First Name: {{userData.fname}}</p>
                <p>Last Name: {{userData.lname}}</p>
                <p>Address: {{userData.adress}}</p>
            </div>
        </div>
        
    </div>

我希望这个 ChildController output 将显示在另一个页面上，例如子页面

  <div style="border: 1px solid black;"> 
            <div data-ng-controller="ChildController">
                <p>First Name: {{userData.fname}}</p>
                <p>Last Name: {{userData.lname}}</p>
                <p>Address: {{userData.adress}}</p>
            </div>
        </div>