$scope.watch does not work between two different angular pages - angularjs

Question

the below code is working within one page with different controlloers, but scope.watch does not work when I pass value from one page to another. How can you do that? below is my code.
.factory('Data', function () {
var data = {
LastName: '',
}
return {
getLastName: function () {
return data.LastName;
},
setLastName: function (lastname) {
data.LastName = lastname;
}
}
}
//FIRST CONTROLLER
$scope.lastname = '';
$scope.$watch('lastname', function (newValue2, oldValue2) {
if (newValue2 !== oldValue2)
Data.setLastName(newValue2);
});
//GET FIRST CONTROLLER INTO SECOND
$scope.$watch(function () {
return Data.getLastName();
}, function (newValue2, oldValue2) {
if (newValue2 !== oldValue2)
$scope.lastname = newValue2;
});
//form
//Firstcontroller
< input type = "text"
name="lastname"
placeholder = "Suhr"
ng-model="lastname"
ng-minlength="3" required />

Answer 1

Porting all your code and it works!
angular.module("test", [])
.controller('Test1', Test1)
.controller('Test2', Test2)
.factory('Data', Data);
function Test1($scope, Data) {
$scope.lastname = '';
$scope.$watch('lastname', function(newValue2, oldValue2) {
if (newValue2 !== oldValue2)
Data.setLastName(newValue2);
});
}
function Test2($scope, Data) {
$scope.$watch(function() {
return Data.getLastName();
}, function(newValue2, oldValue2) {
if (newValue2 !== oldValue2)
$scope.lastname = newValue2;
});
}
function Data() {
var data = {
LastName: '',
}
return {
getLastName: function() {
return data.LastName;
},
setLastName: function(lastname) {
data.LastName = lastname;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="Test1">
<input type="text" name="lastname" ng-model="lastname" placeholder="Suhr" ng-minlength="3" required>
</div>
<div ng-controller="Test2">
{{lastname}}
</div>
</div>