Automatic update of menu list items

So I have a html file called studies.html which displays a list of studies each with an unique nodeRef. Here is a snipped of the code:

<div class="feed-item" ng-repeat="study in studies | orderBy:'title'">
		<div class="feed-media">
			<img src="http://www.speedhunters.com/wp-content/uploads/2013/12/Lamborghini-Hurac%C3%A1n-LP610-4-01_N3-1200x800.jpg" class="feed-image">
			<div class="feed-gradient-overlay"></div>
			<a href="#/app/studies/{{study.nodeRef}}"><h4 class="feed-title">{{study.title}}</h4></a>
		</div>
	</div>

Here is a snippet of code from my app.js:

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/rubyonic/menu.html",
    controller: 'AppCtrl',
  })

   .state('app.studies', {
    url: "/studies",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/studies.html",
        controller: 'StudyCtrl'
      }
    }
  })

   .state('app.study', {
    url: "/studies/:studynodeRef",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/overview.html",
        controller: 'StudyCtrl'
      }
    }
  })

Here is my StudyCtrl:

.controller('StudyCtrl',['$scope','$stateParams','Studies','$filter','$rootScope',function($scope,$stateParams,Studies,$filter,$rootScope) {
  
  $scope.nodeId = $stateParams.studynodeRef;

  $scope.studies = [];

  Studies.all().then(function(data) {
                $scope.x = angular.fromJson(data.allProjects);
                $scope.studies = angular.fromJson($scope.x.list);
                // console.log($scope.studies);
            });


  Studies.fetchCollection($scope.nodeId).then(function(data){
              $scope.y = angular.fromJson(data.list);
              $scope.collections = angular.fromJson($scope.y[0].collections);
              // console.log($scope.collections);
              // $scope.$apply();
});

  Studies.fetchAlerts().then(function(payload){
      $scope.alerts = payload;
      $scope.alert = $filter('filter')(payload, function (d) {
        $scope.id = "" + $scope.nodeId;
        console.log($scope.id);
        if (d.nodeRef === $scope.id)
          return d;
          })[0];
  }
    );

  }

  ])

Here is my Studies service:

.factory('Studies',function($http,$filter,$q){
  return {
    all: function(){
    var deferred = $q.defer();
    $http.get("http://localhost/platform/loginSuccess.json").success(
            function(data){
                // angular.copy(data, studies);
                deferred.resolve(data);
            }
        );
      return deferred.promise;
    },
    fetchCollection: function(collectionId) {
            var deffered = $q.defer();
            $http({
                method: 'post',
                url: 'http://localhost/platform/project/fetch.json',
                params: {
                  'nodeRef': collectionId
                }
            }).success(function(data) {
                deffered.resolve(data);
            });
            
            return deffered.promise;
        },
      fetchAlerts: function() {
        var deffered = $q.defer();
        $http({
          method: 'get',
          url: 'alerts.json'
        }).success(function(data) {
            deffered.resolve(data);
        });
          return deffered.promise;
      }
}})

$scope.nodeId = $stateParams.studynodeRef; obtains the nodeRef from the study url and passes that to the fetchCollection function. Which gets a collection of items that is displayed on the menu.html page (side menu which is present in all templates):

<ion-list ng-controller="StudyCtrl">
      <ion-item ng-repeat="collection in collections" nav-clear menu-close ng-click="go('app.studies')" class="item item-icon-left brand-base-text-color">
          <i class="icon ion-ios-paper"></i>
            {{collection.name}}
        </ion-item>
</ion-list>

Now the collections in the side menu don’t automatically update everytime I click on a study in the studies.html page. It updates after I refresh the page. How can I make the collections update automatically everytime I click on a study ?

Search the forum for ionic view caching

I am wondering if I need to use rootScope.broadcast or something to broadcast the changes. Not sure how the caching works

In your controller, try something like this:

$scope.$on('$ionicView.beforeEnter', function(){
  Studies.all()......
});

I am a little confused why will the $scope.$on be on the Studies.all() call? What I want is for Studies.fetchCollection to get the updated nodeRef and update the collection list accordingly

Call what you want, it was just an example to put you on track, then you have some work to do.

So I tried this:

$scope.$on('$ionicView.enter', function() {
$scope.nodeId = $stateParams.studynodeRef;
  Studies.fetchCollection($scope.nodeId).then(function(data){
      $scope.y = angular.fromJson(data.list);
      $scope.collections = angular.fromJson($scope.y[0].collections);
      console.log($scope.collections);
})
});

And now the $scope.collections actually updates and I can see it on the console however, when I try to print {{collections}} in my template it is blank. I think for some reason the scope isn’t being applied or something. How do I fix this?

ng-repeat directive creates a scope per item.

In order to access scope defined in your controller you must use $parent.

If you search on google you will find plenty of articles in the subject.

Well even when I am not iterating through collections and doing a ng-repeat. When I just try to print the collections object in the template like {{collections}} it is blank

Well post a codepen.

Also, not related with your issue but there is no point in using $scope for storing local variables x and y.

 $scope.y = angular.fromJson(data.list);

better do:

 var y = angular.fromJson(data.list);