title: How I can share the value between two pages in ionic v-1
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- page one view page --&gt;
  
  &lt;ion-content class="search-main padding"&gt;
      &lt;div class="list card"&gt;
   &lt;div class="item item-body no-padding stable"&gt;
    &lt;div class="row no-padding border-bottom" ng-controller="Ctrl3"&gt;
    &lt;div class="col padding border-right" ng-click="openDateCheckIn()"&gt;
     &lt;div class="margin-bottom-10" style="color:#0c60ee;"&gt;&lt;i class="icon icon-money"&gt;&lt;/i&gt; Total Value =&gt;&lt;/div&gt;
    &lt;/div&gt;
          &lt;div class="col padding"&gt;&lt;h2 style="text-align:center; margin-top: 3px;"&gt;Rs. &amp;nbsp; &lt;b&gt;{{rootSum()}}&lt;/b&gt;&lt;/h2&gt;&lt;/div&gt;
    &lt;/div&gt;ass="col padding"&gt;&lt;h2 style="text-align:center; margin-top: 3px;"&gt;Rs. &amp;nbsp; {{rootSum()}}&lt;/h2&gt;&lt;/div&gt;
    &lt;/div&gt;
   &lt;div ng-controller="Ctrl1"&gt;   
  &lt;div ng-repeat="gender in genders"&gt;
      &lt;div class="row row-no-padding no-margin padding-important" style="color: #000;"&gt;
              &lt;div class="col col-70"&gt;&lt;i class="ion ion-ios-circle-filled"&gt;&lt;/i&gt; &lt;span&gt;&amp;nbsp;{{gender.id}}&lt;/span&gt;&lt;/div&gt;
              &lt;div class="col col-20"&gt;&lt;span&gt;Rs {{gender.value}}&lt;/span&gt;&lt;/div&gt;
          &lt;div class="col col-10"&gt;&lt;div&gt;&lt;label class="search-checkbox item item-checkbox" style="margin: -5px 0px 0px -2px;"&gt;&lt;div class="checkbox checkbox-input-hidden disable-pointer-events checkbox-circle"&gt;&lt;input id="{{gender}}" type="checkbox" value="{{gender.value}}" ng-checked="selection.indexOf(gender) &gt; -1" ng-click="toggleSelection(gender)" /&gt;&lt;i class="checkbox-icon"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class="item-content disable-pointer-events" ng-transclude=""&gt;&lt;/div&gt;&lt;/label&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;/div&gt;
       &lt;/div&gt;&lt;/div&gt;
  
  &lt;/ion-content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Page two view page --&gt;
  
  &lt;ion-content class="search-main padding"&gt;
      &lt;div class="list card"&gt;
   &lt;div class="item item-body no-padding stable"&gt;
    &lt;div class="row no-padding border-bottom" ng-controller="Ctrl3"&gt;
    &lt;div class="col padding border-right" ng-click="openDateCheckIn()"&gt;
     &lt;div class="margin-bottom-10" style="color:#0c60ee;"&gt;&lt;i class="icon icon-money"&gt;&lt;/i&gt; Total Value =&gt;&lt;/div&gt;
    &lt;/div&gt;
          &lt;div class="col padding"&gt;&lt;h2 style="text-align:center; margin-top: 3px;"&gt;Rs. &amp;nbsp; &lt;b&gt;{{rootSum()}}&lt;/b&gt;&lt;/h2&gt;&lt;/div&gt;
    &lt;/div&gt;
   &lt;div ng-controller="Ctrl2"&gt;   
  &lt;div ng-repeat="gender in genders"&gt;
      &lt;div class="row row-no-padding no-margin padding-important" style="color: #000;"&gt;
              &lt;div class="col col-70"&gt;&lt;i class="ion ion-ios-circle-filled"&gt;&lt;/i&gt; &lt;span&gt;&amp;nbsp;{{gender.id}}&lt;/span&gt;&lt;/div&gt;
              &lt;div class="col col-20"&gt;&lt;span&gt;Rs {{gender.value}}&lt;/span&gt;&lt;/div&gt;
          &lt;div class="col col-10"&gt;&lt;div&gt;&lt;label class="search-checkbox item item-checkbox" style="margin: -5px 0px 0px -2px;"&gt;&lt;div class="checkbox checkbox-input-hidden disable-pointer-events checkbox-circle"&gt;&lt;input id="{{gender}}" type="checkbox" value="{{gender.value}}" ng-checked="selection.indexOf(gender) &gt; -1" ng-click="toggleSelection(gender)" /&gt;&lt;i class="checkbox-icon"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class="item-content disable-pointer-events" ng-transclude=""&gt;&lt;/div&gt;&lt;/label&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;/div&gt;
       &lt;/div&gt;&lt;/div&gt;
          
  &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;/ion-content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Controller page --</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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 &gt; -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 &gt; -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 &lt; $rootScope.selection.length; i++){
          var product = $rootScope.selection[i];
          total += (product.value);
      }
      return total
        }; 
  
      }) *</code></pre>
  </div>
  </div>
  </p>