Hi rani,
Create your factory and return an object and let your controllers work with the reference to the same object.
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.factory('MyFactory', function () {
return {
Student: { Name: '', Country: '' }
};
});
app.controller('MyController1', function ($scope, MyFactory) {
$scope.Student = MyFactory.Student;
});
app.controller('MyController2', function ($scope, MyFactory) {
$scope.Student = MyFactory.Student;
});
</script>
<div ng-app="MyApp">
<div ng-controller="MyController1">
<h4>
Controller 1</h4>
<table>
<tr>
<td><input type="text" ng-model="Student.Name" placeholder="Enter Name"></td>
<td><input type="text" ng-model="Student.Country" placeholder="Enter Country"></td>
</tr>
<tr>
<td>Name is {{Student.Name}}</td>
<td>Country is {{Student.Country}}</td>
</tr>
</table>
</div>
<hr />
<div ng-controller="MyController2">
<h4>Controller 2</h4>
Name : <b>{{Student.Name}}</b>
<br />
Country : <b>{{Student.Country}}</b>
</div>
</div>
</body>
</html>
Demo
