javascript - ng repeat list not getting updated when menu and content is in different template (Ionic Framework) -

i working on 1 ionic framework project.

where stuck of list not getting updated. once menu item clicked list should updated accordingly.

as both things in different controller don't have idea how can scope.apply

below mine code.

menu.html

<ion-side-menus enable-menu-with-back-views="true">   <ion-side-menu-content>     <ion-nav-bar class="bar-assertive">       <ion-nav-back-button class="button-clear button-icon ion-ios-arrow-back">       </ion-nav-back-button>        <ion-nav-buttons side="left">         <button class="button button-icon button-clear ion-navicon" menu-toggle="left">         </button>       </ion-nav-buttons>     </ion-nav-bar>     <ion-nav-view name="maincontent"></ion-nav-view>   </ion-side-menu-content>    <ion-side-menu side="left">   <ion-header-bar class="bar-assertive">       <h1 class="title">services</h1>     </ion-header-bar> <ion-content>         <div class="list" ng-controller="servicectrl vm">    <a menu-close class="item item-icon-right item-dark" ng-repeat="services in vm.menu" ng-click="vm.setservice(services.id)">     {{services.name}}  <i class="icon ion-ios-arrow-right ion-accessory"></i> </a> </div>       <!-- </ion-content> -->   </ion-side-menu> </ion-side-menus> 

menu services

angular.module('starter').controller('servicectrl', ['$state','servicefactory','$scope','$rootscope', servicectrl]);          function servicectrl($state, servicefactory,$scope,$rootscope) {             var vm = this;              var menu = servicefactory.getservice();             vm.menu = menu;          /*  var data = servicefactory.getservice();             vm.menu = data.menu;*/               vm.setservice = function(menuid){                 //$scope.$apply(function() {                 //alert('a');                 servicefactory.setservice(menuid);                 //$scope.subserviceid = menuid;                 $state.go('app.sub'); settimeout(function(){                  alert('asdf')             $scope.$apply()             }, 300);                 //});             };       }; 

list page needs updated

<ion-view view-title="{{vm.menu[vm.subserviceid-1]['name']}}" ng-controller="subservicectrl vm">   <ion-content> <div class="list">   <a class="item item-icon-right" ng-repeat="services in lists" ng-click="vm.setsubservice(services.sname)">     {{services.sname}} <i class="icon ion-ios-arrow-right ion-accessory"></i> </a> </div>   </ion-content> </ion-view> 

and list controller

angular.module('starter').controller('subservicectrl',['$state','servicefactory','$scope','$rootscope',subservicectrl]);  function subservicectrl($state,servicefactory,$scope,$rootscope) {  var vm = this;  //get sub services              var menu = servicefactory.getservice();     $scope.menua = menu;         var subserviceida = servicefactory.actsercice();     vm.subserviceid = servicefactory.getselected();         $rootscope.lists = menu[subserviceida-1].subitems;      alert('as check');     console.log(vm.subserviceid);     alert("first level menu id "+vm.subserviceid);     vm.menuid = servicefactory.setfirstid();     //to selected sub item. second call  setservice() //$scope.$apply(); if(!$scope.$$phase) $scope.$apply()      vm.setsubservice = function(subname) {     servicefactory.setservice(subname);     $state.go('app.next');     //$scope.$apply();     };  }; 

ok ownself solved it.

just added

cache: false, 

in routerprovider.