How I can share the value between two pages in ionic v-1

I am trying to add the value of both pages on selection.
It is adding on individual pages. But while I am moving to the next page the Total value comes Zero. I am trying to add pass total added value from one page to another page.
As I search , I found that there is a need to create a service controller to call a global scope value.

<!-- page one view page -->

<ion-content class="search-main padding">
        <div class="list card">
        <div class="item item-body no-padding stable">
                <div class="row no-padding border-bottom" ng-controller="Ctrl3">
                <div class="col padding border-right" ng-click="openDateCheckIn()">
                        <div class="margin-bottom-10" style="color:#0c60ee;"><i class="icon icon-money"></i> Total Value =></div>
                </div>
        <div class="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. &nbsp; <b></b></h2></div>
                </div>ass="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. &nbsp; </h2></div>
                </div>
 <div ng-controller="Ctrl1">   
<div ng-repeat="gender in genders">
    <div class="row row-no-padding no-margin padding-important" style="color: #000;">
            <div class="col col-70"><i class="ion ion-ios-circle-filled"></i> <span>&nbsp;</span></div>
            <div class="col col-20"><span>Rs </span></div>
        <div class="col col-10"><div><label class="search-checkbox item item-checkbox" style="margin: -5px 0px 0px -2px;"><div class="checkbox checkbox-input-hidden disable-pointer-events checkbox-circle"><input id="" type="checkbox" value="" ng-checked="selection.indexOf(gender) > -1" ng-click="toggleSelection(gender)" /><i class="checkbox-icon"></i></div><div class="item-content disable-pointer-events" ng-transclude=""></div></label></div>
        </div></div>
     </div></div>

</ion-content>

<!-- Page two view page -->

<ion-content class="search-main padding">
        <div class="list card">
        <div class="item item-body no-padding stable">
                <div class="row no-padding border-bottom" ng-controller="Ctrl3">
                <div class="col padding border-right" ng-click="openDateCheckIn()">
                        <div class="margin-bottom-10" style="color:#0c60ee;"><i class="icon icon-money"></i> Total Value =></div>
                </div>
        <div class="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. &nbsp; <b></b></h2></div>
                </div>
 <div ng-controller="Ctrl2">   
<div ng-repeat="gender in genders">
    <div class="row row-no-padding no-margin padding-important" style="color: #000;">
            <div class="col col-70"><i class="ion ion-ios-circle-filled"></i> <span>&nbsp;</span></div>
            <div class="col col-20"><span>Rs </span></div>
        <div class="col col-10"><div><label class="search-checkbox item item-checkbox" style="margin: -5px 0px 0px -2px;"><div class="checkbox checkbox-input-hidden disable-pointer-events checkbox-circle"><input id="" type="checkbox" value="" ng-checked="selection.indexOf(gender) > -1" ng-click="toggleSelection(gender)" /><i class="checkbox-icon"></i></div><div class="item-content disable-pointer-events" ng-transclude=""></div></label></div>
        </div></div>
     </div></div>
        
</div>
</div> 

</ion-content>

Controller page —

//Ladies Makeup Party
.controller('Ctrl1', function($scope ,$rootScope) {
    $scope.genders=[{
    'id':'Krylon Party Makeup', 'value':2000 },
    {'id':'Makeup Studio', 'value':2200 },
    {'id':'Party Makeup(MAC)', 'value':2500 },
    {'id':'Party Mackeup(Airbrush)', 'value':3500 }     
    ];
      $rootScope.selection=[];
      $scope.toggleSelection = function toggleSelection(gender) {
        var idx = $scope.selection.indexOf(gender);
        if (idx > -1) {
          $scope.selection.splice(idx, 1);
         }
         else {
           $scope.selection.push(gender);        
         }
      };
    })

//Ladies Makeup Pre-bridal
.controller('Ctrl2', function($scope ,$rootScope) {
    $scope.genders=[{
    'id':'Silver', 'value':10000 },
    {'id':'Gold', 'value':12000 },
    {'id':'Platinum', 'value':16000 }                
    ];
      $rootScope.selection=[];
      $scope.toggleSelection = function toggleSelection(gender) {
        var idx = $scope.selection.indexOf(gender);
        if (idx > -1) {
          $scope.selection.splice(idx, 1);
         }
         else {
           $scope.selection.push(gender);        
         }
      };
    })

// Add total value on select
 .controller('Ctrl3', function($scope ,$rootScope) {
    
   $rootScope.rootSum=function(){
        var total=0;
        for(var i = 0; i < $rootScope.selection.length; i++){
        var product = $rootScope.selection[i];
        total += (product.value);
    }
    return total
      }; 

    }) *

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/18/how-i-can-share-the-value-between-two-pages-in-ionic-v-1/
via @lzomedia #developer #freelance #web #lzomedia.com