AngularJS - Passing data between pages


I am an AngularJS starter. I am trying to send data from :

  • Page A : Van Listing page


  • 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" >
   <tr> <td ng-controller="VanUpdateCtrl"><a href="#/van-update" ng-click="prePopulateForm(row.members.vanNumber.value )" class="btn btn-small btn-primary">update</a></td> </tr>

*** 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=""/>

*** VanUpdateCtrl **

   app.controller('VanUpdateCtrl', ['$scope', 'VanUpdateFactory', '$location',
                                      function ($scope, VanUpdateFactory, $location) {

        //callback for ng-init 'populateDD':    
        $scope.prePopulateForm = function (cardNoParam m) {

            alert('cardNo = '+cardNoParam);


So, $scope.formData.cardNumber OR $scope.formData in the destination page is not recognised.
Problem courtesy of: olatom


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:


In your controller B:

$scope.desiredLocation = myService.get();

Remember to inject myService in the controllers by passing it as a parameter.

Solution courtesy of: Wawy


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.

Discussion courtesy of: Yang Zhang

What you should do is create a service to share data between controllers.

Nice tutorial

Discussion courtesy of: dopplesoldner

This recipe can be found in it's original form on Stack Over Flow.