how to retain values while navigating across pages using component routing angular 1.5

Question

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 PLUNKER . This is very basic example of two page navigation.

When I enter/select value on Page 1 and I move to Next Page. When I come to Previous Page 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.

If one can retain toggle selection. That would be great. Here is my code:

JavaScript

(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);

HTML

      <div class="well form-horizontal">

    <div class="form-group" style="height: 50px;">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">NUMERIC VALUE</label>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="btn-group">
          <button id="clusters-fc" type="button" class="btn btn-toggle" value="111" ng-class="{active: vm.clusters.numericValue === '111'}" ng-click="vm.selectNumericValue('111')">
            111
          </button>
          <button id="clusters-ip" type="button" class="btn btn-toggle" value="222" ng-class="{active: vm.clusters.numericValue === '222'}" ng-click="vm.selectNumericValue('222')">
            222
          </button>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">ALPHABETICAL VALUE</label>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="btn-group">
          <button type="button" class="btn btn-toggle" ng-class="{active: vm.clusters.alphaValue === 'AAA'}" ng-click="vm.selectAlphaValue('AAA')">
            AAA
          </button>
          <button type="button" class="btn btn-toggle" ng-class="{active: vm.clusters.alphaValue === 'BBB'}" ng-click="vm.selectAlphaValue('BBB')">
            BBB
          </button>
          <button id="def-ip-tenGb" type="button" class="btn btn-toggle" ng-class="{active: vm.clusters.alphaValue === 'CCC'}" ng-click="vm.selectAlphaValue('CCC')">
            CCC
          </button>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">Entered VALUE</label>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="btn-group">
          <input type="textbox" class="form-control">
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">Selected VALUE</label>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="btn-group">
          <select class="form-control" ng-model="vm.clusters.productionArrayType">
            <option>111</option>
            <option>222</option>
            <option>333</option>
            <option>444</option>
          </select>
        </div>
      </div>
    </div>

  </div>
  <a class="btn btn-success" ng-link="['Second']">Next Page</a>

attaching image of running sample:

Answer 1

You can use shared service for this:

module.service('sharedService', function() {
});

module.component('firstComponent', {
    templateUrl: "1.html",
    controllerAs: "vm",
    controller: function($rootScope, sharedService) {
      $rootScope.title = "Title from Page 1";
      var vm = this;

      vm.clusters = {};

      vm.$onInit = $onInit;
      vm.sharedService = sharedService;
      vm.sharedService.selectNumericValue = selectNumericValue;
      vm.sharedService.selectAlphaValue = selectAlphaValue;
      ...
 });

<input type="textbox" ng-model="vm.sharedService.alphaValue" class="form-control">

UPDATE PLUNKER