AngularJS - Passing data between pages

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