Unable to Pass data between two views from one controller in AngularJS app

Question

I have 2 views. View1 and View2. View1 has list of products and checkboxes next to it and submit button. View2 is the page that displays the products selected from view1. My goal is to send the products selected (using checkboxes) from view1 to view2.

Here is my code..

 **<a href="/#/Details/{{cartprd}}" class="bg-white" ng-click="SendToCartPage(cartprd)">{{fff}}</a>**

 <tr>
     <td>
       **<input type="checkbox" ng-click="UpdateCart(tbl, $event)" ng-bind="tbl" id=" {{$index + 1}} " />**
     </td>
     <td>
       <div>
            <div class="thumbnail" ng-mouseover="getproductonhover()">
               <div class="caption">
                  <span class="">{{tbl.ProdName}}</span>
                  <p class="">{{tbl.ProdDescription}}</p>
               </div>
                  <img src="~/Images/imgcamera.jpg" class="imgproduct" />
            </div>
        </div>
      </td>
      <td>{{tbl.ProdName}}</td>
      <td>{{tbl.ProdDescription}}</td>
      <td>
        <a class="btn btn-primary" ng-click="GetSingleProduct(tbl)">Edit</a>
        </td>
  </tr>

Controller.js

app.controller('CartController', function ($scope, $routeParams) {
  $scope.SendToCartPage = function (cartprd) {       
    return cartprd;
}
});

View2

<div ng-controller="CartController">
{{SendToCartPage}} 
</div>

I see an empty page in the view2. Can someone please tell me what mistake I am doing? One thing I noticed is when I make $scope.SendToCartPage = "mystring" then I can see "mystring" in view2.

Answer 1

To achieve this goal you can use angularjs service which helps to organize and share code across your app.

So create a basic service like this

var appmodule = angular.module('myModule', []);
appmodule.factory('myService', function() {
 var savedCheckedData = {}
 function setData(data) {
   savedCheckedData = data;
 }
 function getData() {
  return savedCheckedData;
 }    
 return {
  set: setData,
  get: getData
 }    
});

So now inject this service in controller.When in view1 you select checkbox push the selected data using setData.And in View2 get the data using getData and display it.

So actually your code would look like this

app.controller('CartController', function ($scope, $routeParams, myService)
{
  $scope.SendToCartPage = function (cartprd) {       
    //get the checkboxes data here and push it        
    myService.set(cartprd);
}
});