angularjs - Persisting state between different views using ui-router -

i having issues maintaining state of item quantity selected in main controller view, after returning cart controller view. example after adding quantity of 2 items in main controller view, reflect 2 items in cart controller view, when go main controller view show though no items have been added in main controller view (state disappears), though cart controller view still show 2 items. need state of quantities persist in both views, when navigating , fourth between views. have idea missing allows persistence between both views? plunker code works fine, it's when navigating between views in actual web application encounter problem. knows how resolve this, thank in advance!

https://jsfiddle.net/156mjkqx/

html

<div ng-app="app">   <div ng-controller="maincontroller main">     <h2>   main controller view   </h2>     <div>       <table>         <tr>           <td>item</td>           <td>price</td>           <td>quantity</td>           <td></td>         </tr>         <tr ng-repeat="item in main.items">           <td>{{item.name}}</td>           <td>{{item.price | currency}}</td>           <td>           <button ng-click="main.decreaseitemamount(item)">               -             </button>             {{item.quantity}}             <button ng-click="main.increaseitemamount(item)">               +             </button>             <button ng-click="main.addtocart(item)">               add cart             </button>           </td>         </tr>       </table>     </div>   </div>   <div ng-controller="cartcontroller cart">     <h2>   cart controller view   </h2>     <div>       <table>         <tr>           <td>item</td>           <td>price</td>           <td>quantity</td>           <td></td>         </tr>         <tr ng-repeat="item in cart.cartstorage.items">           <td>{{item.name}}</td>           <td>{{item.price | currency}}</td>           <td>             <button ng-click="cart.decreaseitemamount(item)">               -             </button>             {{item.quantity}}             <button ng-click="cart.increaseitemamount(item)">               +             </button>             <button ng-click="cart.removefromcart(item)">               remove cart             </button>           </td>         </tr>       </table>     </div>   </div> </div> 

javascript

angular.module('app', [])   .value('cartstorage', {     items: []   })   .controller('maincontroller', function(cartstorage) {     var _this = this;     _this.cartstorage = cartstorage;      _this.items = [{       name: 'apple',       price: .5,       quantity: 1,     }];      _this.addtocart = function(item) {       _this.cartstorage.items.push(item);       item.addedtocart = true;     }      _this.increaseitemamount = function(item) {       item.quantity++;       item.showaddtocart = true;     }      _this.decreaseitemamount = function(item) {       item.quantity--;       if (item.quantity <= 0) {         item.quantity = 0;         item.addedtocart = false;         item.showaddtocart = false;         var itemindex = _this.cartstorage.items.indexof(item);         if (itemindex > -1) {           _this.cartstorage.items.splice(itemindex, 1);         }       } else {         item.showaddtocart = true;       }     }   })   .controller('cartcontroller', function(cartstorage) {     var _this = this;     _this.cartstorage = cartstorage;      _this.increaseitemamount = function(item) {       item.quantity++;     }      _this.decreaseitemamount = function(item) {       item.quantity--;       if (item.quantity <= 0) {         item.quantity = 0;         item.addedtocart = false;         item.showaddtocart = false;         var itemindex = _this.cartstorage.items.indexof(item);         if (itemindex > -1) {           _this.cartstorage.items.splice(itemindex, 1);         }       }     }      _this.removefromcart = function(item) {       item.quantity = 0;       item.addedtocart = false;       item.showaddtocart = false;       var itemindex = _this.cartstorage.items.indexof(item);       if (itemindex > -1) {         _this.cartstorage.items.splice(itemindex, 1);       }     }   }); 

either can retain value $rootscope or using $localstorage. have used $localstorage in below code. before using $localstorage, use ng-storage cdn & inject $localstorage in both controller. sure you.

     angular.module('app', [])      .controller('maincontroller', function($localstorage) {     var _this = this;     $localstorage.items = $localstorage.items || [];     _this.cartstorage = $localstorage.items;      _this.items = [{       name: 'apple',       price: .5,       quantity: 1,     }];      _this.addtocart = function(item) {       $localstorage.items.push(item);       item.addedtocart = true;     }      _this.increaseitemamount = function(item) {       item.quantity++;       item.showaddtocart = true;     }      _this.decreaseitemamount = function(item) {       item.quantity--;       if (item.quantity <= 0) {         item.quantity = 0;         item.addedtocart = false;         item.showaddtocart = false;         var itemindex = $localstorage.items.indexof(item);         if (itemindex > -1) {           $localstorage.items.splice(itemindex, 1);         }       } else {         item.showaddtocart = true;       }     }   })   .controller('cartcontroller', function(localstorage) {     var _this = this;      _this.cartstorage = $localstorage.items || [];      _this.increaseitemamount = function(item) {       item.quantity++;     }      _this.decreaseitemamount = function(item) {       item.quantity--;       if (item.quantity <= 0) {         item.quantity = 0;         item.addedtocart = false;         item.showaddtocart = false;         var itemindex = $localstorage.items.indexof(item);         if (itemindex > -1) {           $localstorage.items.splice(itemindex, 1);         }       }     }      _this.removefromcart = function(item) {       item.quantity = 0;       item.addedtocart = false;       item.showaddtocart = false;       var itemindex = $localstorage.items.indexof(item);       if (itemindex > -1) {        $localstorage.items.splice(itemindex, 1);       }     }   });