Angular ng-model is not working in multiples views - angularjs

Question

I'm trying to build a single page application with ng-view but at this time I've a problem about ng-model. I've followed this tutorial here and all is working perfectly except ng-model.
I've added a form with a single input text with ng-model and a button who calls a function in my controller. When button is submitted, I load a view where I try to get my ng-model but whithout success...
See below my code :
home.html
<div>
<h2>Home Page</h2>
<form>
<input type="text" ng-model="actia.name" placeholder="Saisir un mot"><br>
<button ng-click="toSend()">OK</button>
</form>
</div>
app.js
var MyApp = angular.module('MyApp', ['ngRoute']);
MyApp.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/',{
templateUrl : 'pages/home.html',
controller : 'MainController'
}).when('/contact',{
templateUrl : 'pages/contact.html',
controller : 'MainController'
});
// $locationProvider.html5Mode(true);
});
MyApp.controller('MainController', function($scope, $location){
$scope.message = "Message du main Control";
$scope.actia = {
name : '',
lastname : 'goerge'
};
$scope.toSend = function(){
var donnees = $scope.actia;
// $location.url('/contact');
console.log(donnees);
};
});
contact.home
<div>
<h2>Contact Page</h2>
<p>Value is : {{actia.name}} {{actia.lastname}}</p>
</div>
{{actia.lastname}} is displayed but not {{actia.name}}
Have you any suggestions to solve this ?
Thanks in advance

Answer 1

That is because you get a new Controller for each route. They don't know each other.
YOu may need a factory/service to keep the data in sync between those two views.