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>{{rootSum()}}</b></h2></div>
		</div>ass="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. &nbsp; {{rootSum()}}</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;{{gender.id}}</span></div>
            <div class="col col-20"><span>Rs {{gender.value}}</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="{{gender}}" type="checkbox" value="{{gender.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>{{rootSum()}}</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;{{gender.id}}</span></div>
            <div class="col col-20"><span>Rs {{gender.value}}</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="{{gender}}" type="checkbox" value="{{gender.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
      }; 

    }) *

Solution

There are two problems I can see here.

You are initialising $rootScope.selection = [] at every controller, this deletes all previous changes. Initialise it at start of page load inside run block.Use this link to implement run run.

myApp.run(function() { console.log("app run"); });

You are not transferring selected data to $rootScope.selection variable. You need to append your selected product in rootScope and make sure no item is repeated. Instead of array, I recommend you to use object with 'ids' as attrinute name, this will ensure that no item is repeated inherently.