javascript - Update and Save Value on ng-Click -

i creating multi-page-form using ui-router. during first part of form, user select button. button's value used sort table loaded on second page. thought set/update buttons value ng-click, not saving. second page doesn't sort updated value.

my specific problem in firstpage.html - when ng-button clicked. original value of sorttype is: sorttype = ''. plan set sorttype value on page. how did it:

<a ui-sref="orderform.step2"     ng-click="sorttype ='name'"     class="btn btn-block btn-info"> 

i thought ng-click="sorttype ='name'" have updated , saved sorttype value. however, when second page still: sorttype= ''. of have suggestions on how fix this? thanks!

here's firstpage.html:

<div class="form-group row" ng-controller="formcontroller">     <div class="col-xs-6 col-xs-offset-3">         <a ui-sref="orderform.step2"             ng-click="sorttype ='name'"             class="btn btn-block btn-info">            title             <span class="glyphicon glyphicon-circle-arrow-right"></span>         </a>     </div>      <h1>presorted</h1>      <pre>{{sorttype}}</pre> </div> 

here's second page:

<div class="form-group" ng-controller="formcontroller">     <h2> sort type: </h2>     <pre>{{sorttype}}</pre>      <table class="table table-bordered table-striped">         <thead>             <tr>                 <td>                     <label>beverage</label>                 </td>                 <td>                     <label>type</label>                 </td>                 <td>                     <label>popularity</label>                 </td>             </tr>         </thead>         <tbody>         <tr ng-repeat="drink in drinks | orderby: sorttype | filter:searchdrink">             <td>{{drink.name}}</td>             <td>{{drink.type}}</td>             <td>{{drink.popularity}}</td>         </tr>     </tbody>   </table> </div> 

here's app.js page:

angular.module('myapp', ['nganimate', 'ui.router']) .config(function($stateprovider, $urlrouterprovider) {     $stateprovider         .state('orderform', {             url: '/orderform',             templateurl: 'orderform.html',             controller: 'formcontroller'          })          .state('orderform.step1', {             url: '/step1',             templateurl: 'step1.html'          })           .state('orderform.step2', {             url: '/step2',             templateurl: 'step2.html'          });       $urlrouterprovider.otherwise('/orderform/step1');  })  .controller('formcontroller', function($scope) {      $scope.formdata = {};     $scope.processform = function() {          alert('thank you!');      };       $scope.sorttype     = '';       $scope.sortreverse  = false;        $scope.searchdrink    = '';            //lists of drinks:      $scope.drinks = [         {name:'americano', type: 'espresso beverage', popularity: 4},         {name:'raspberry tea', type: 'tea', popularity: 2},         {name:'vanilla latte', type: 'espresso beverage', popularity: 3 },         {name:'mocha', type: 'espresso beverage', popularity: 8},         {name:'pike', type: 'freshly brewed coffee', popularity: 6},         {name:'green tea', type: 'tea', popularity: 4},         {name:'frappuccino', type: 'iced drinks', popularity: 5},         {name:'fruit smoothie', type: 'iced drinks', popularity: 6}     ];  }); 

when route using uirouter, initializes controller each time called, in case, between pages.

what need here service hold values, instantiated once (a singleton).

further reading: https://docs.angularjs.org/guide/services

tutorial: https://www.youtube.com/watch?v=hxphv5gwgyk