AngularJS - Passing data between pages - angularjs

Question

I am an AngularJS starter. I am trying to send data from :
Page A : Van Listing page
to
Page B: Van Update page.
When user click the update link for a van, I am invoking a controller and retrieving the van details in the controller. But, I cannot assign the van details to the Page B ( Van Update Page) using the same controller... Error "Cannot set property 'vanNumber' of undefined"
*** Page A: Van List ****
<form name="listVanForm" >
<table>
<tr> <td ng-controller="VanUpdateCtrl">update</td> </tr>
</table>
</form>
*** Page B: Van Update ****
<div class="container">
<h2>Edit Van </h2>
<form name="updateVanForm" novalidate="novalidate" class="form-horizontal" ng-submit="updateCard(formData)">
<div class="control-group">
<label class="control-label" >Van Number:</label>
<div class="controls">
<input type="text" id="vanNumber" ng-model="formData.vanNumber" placeholder=""/>
</div>
</div>
</form>
</div>
*** VanUpdateCtrl **
app.controller('VanUpdateCtrl', ['$scope', 'VanUpdateFactory', '$location',
function ($scope, VanUpdateFactory, $location) {
//callback for ng-init 'populateDD':
$scope.prePopulateForm = function (cardNoParam m) {
alert('cardNo = '+cardNoParam);
$scope.formData.cardNumber=cardNoParam;}
}
So, $scope.formData.cardNumber OR $scope.formData in the destination page is not recognised.

Answer 1

You need to create a service to be able to share data between controllers.
app.factory('myService', function() {
var savedData = {}
function set(data) {
savedData = data;
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
});
In your controller A:
myService.set(yourSharedData);
In your controller B:
$scope.desiredLocation = myService.get();
Remember to inject myService in the controllers by passing it as a parameter.

Answer 2

What you should do is create a service to share data between controllers.
Nice tutorial https://www.youtube.com/watch?v=HXpHV5gWgyk

Answer 3

If you only need to share data between views/scopes/controllers, the easiest way is to store it in $rootScope. However, if you need a shared function, it is better to define a service to do that.

Answer 4

app.factory('persistObject', function () {
var persistObject = [];
function set(objectName, data) {
persistObject[objectName] = data;
}
function get(objectName) {
return persistObject[objectName];
}
return {
set: set,
get: get
}
});
Fill it with data like this
persistObject.set('objectName', data);
Get the object data like this
persistObject.get('objectName');