title: how to retain values while navigating across pages using component routing angular 1.5
body: <p>Recently I have implemented angular 1.5 component routing. But I am not able to retain values while navigating across pages. 
  How can I retain values while navigating across page. have a look at this <a href="https://plnkr.co/edit/99Cfc7?p=preview" rel="nofollow noreferrer">PLUNKER</a> . This is very basic example of two page navigation.</p>
  
  <p>When I enter/select value on Page 1 and I move to <strong>Next Page</strong>. When I come to <strong>Previous Page</strong> all values reset, It's not retaining values. How can we achieve retaining values while navigating across pages?? This example having only two page navigation, In real application I will be having 5-10 page navigation.</p>
  
  <p>If one can retain toggle selection. That would be great.
  Here is my code:</p>
  
  <p><strong>JavaScript</strong> </p>
  
  <pre><code>(function(angular) {
      'use strict';
      var module = angular.module('app', ['ngComponentRouter']);
  
      module.config(function($locationProvider) {
        $locationProvider.html5Mode(true);
      });
  
      module.value('$routerRootComponent', 'myFirstApp');
  
      module.component('myFirstApp', {
        templateUrl: "mainview.html",
        $routeConfig: [{
          path: '/',
          redirectTo: ['/First']
        }, {
          path: '/first',
          name: 'First',
          component: 'firstComponent'
        }, {
          path: '/second',
          name: 'Second',
          component: 'secondComponent'
        }]
      })
  
      module.component('firstComponent', {
        templateUrl: "1.html",
        controllerAs: "vm",
        controller: function($rootScope) {
          $rootScope.title = "Title from Page 1";
          var vm = this;
  
          vm.clusters = {};
  
          vm.$onInit = $onInit;
          vm.selectNumericValue = selectNumericValue;
          vm.selectAlphaValue = selectAlphaValue;
  
          // default selection
          function $onInit() {
            vm.clusters.numericValue = '111';
            vm.clusters.alphaValue = 'AAA';
          }
  
          // setting numeric value
          function selectNumericValue(numValue) {
            vm.clusters.numericValue = numValue;
            if (vm.clusters.numericValue === '111') {
              vm.clusters.numericValue = '111';
            } else {
              vm.clusters.numericValue = '222';
            }
          }
  
          function selectAlphaValue(alphaValue) {
            vm.clusters.alphaValue = alphaValue;
            if (vm.clusters.alphaValue === 'AAA') {
              vm.clusters.alphaValue = 'AAA';
            } else if (vm.clusters.alphaValue === 'BBB') {
              vm.clusters.alphaValue = 'BBB';
            } else {
              vm.clusters.alphaValue = 'CCC';
            }
          }
  
        }
      });
  
      module.component('secondComponent', {
        templateUrl: "2.html",
        controller: function($rootScope) {
          $rootScope.title = "Title from Page 2";
        },
      });
  
    })(window.angular);
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>      &lt;div class="well form-horizontal"&gt;
  
      &lt;div class="form-group" style="height: 50px;"&gt;
        &lt;label class="control-label col-md-4 col-sm-4 col-xs-4"&gt;NUMERIC VALUE&lt;/label&gt;
  
        &lt;div class="col-md-6 col-sm-6 col-xs-6"&gt;
          &lt;div class="btn-group"&gt;
            &lt;button id="clusters-fc" type="button" class="btn btn-toggle" value="111" ng-class="{active: vm.clusters.numericValue === '111'}" ng-click="vm.selectNumericValue('111')"&gt;
              111
            &lt;/button&gt;
            &lt;button id="clusters-ip" type="button" class="btn btn-toggle" value="222" ng-class="{active: vm.clusters.numericValue === '222'}" ng-click="vm.selectNumericValue('222')"&gt;
              222
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label class="control-label col-md-4 col-sm-4 col-xs-4"&gt;ALPHABETICAL VALUE&lt;/label&gt;
  
        &lt;div class="col-md-6 col-sm-6 col-xs-6"&gt;
          &lt;div class="btn-group"&gt;
            &lt;button type="button" class="btn btn-toggle" ng-class="{active: vm.clusters.alphaValue === 'AAA'}" ng-click="vm.selectAlphaValue('AAA')"&gt;
              AAA
            &lt;/button&gt;
            &lt;button type="button" class="btn btn-toggle" ng-class="{active: vm.clusters.alphaValue === 'BBB'}" ng-click="vm.selectAlphaValue('BBB')"&gt;
              BBB
            &lt;/button&gt;
            &lt;button id="def-ip-tenGb" type="button" class="btn btn-toggle" ng-class="{active: vm.clusters.alphaValue === 'CCC'}" ng-click="vm.selectAlphaValue('CCC')"&gt;
              CCC
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label class="control-label col-md-4 col-sm-4 col-xs-4"&gt;Entered VALUE&lt;/label&gt;
  
        &lt;div class="col-md-6 col-sm-6 col-xs-6"&gt;
          &lt;div class="btn-group"&gt;
            &lt;input type="textbox" class="form-control"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label class="control-label col-md-4 col-sm-4 col-xs-4"&gt;Selected VALUE&lt;/label&gt;
  
        &lt;div class="col-md-6 col-sm-6 col-xs-6"&gt;
          &lt;div class="btn-group"&gt;
            &lt;select class="form-control" ng-model="vm.clusters.productionArrayType"&gt;
              &lt;option&gt;111&lt;/option&gt;
              &lt;option&gt;222&lt;/option&gt;
              &lt;option&gt;333&lt;/option&gt;
              &lt;option&gt;444&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;a class="btn btn-success" ng-link="['Second']"&gt;Next Page&lt;/a&gt;
  </code></pre>
  
  <p>attaching image of running sample:<a href="https://i.stack.imgur.com/ThIYR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ThIYR.png" alt="enter image description here"></a></p>