How to fetch output to another page using AngularJS watch - angularjs

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.
This is my 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;
});
}]);
This is my Parent 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>
I want this ChildController output will shown on another page like child page
<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>