Angularjs scope variable lost when loading another page

Question

I have the following controller:

 appModule.controller('myController', function($scope, $http)
 {
   $scope.getObject= function(id)
   {
      $http.get('/objects/'+id+'.json').success(function (data, status) {
      $scope.objects = data;
    });

}
});

In my view index.html

 <button ng-click="getObject(id)">click</button>

It works fine I get my objects. In another view (home.html) I want to get the 'objects' variable

How can'I do this.

Thanks

You might find this post quite helpful. http://stackoverflow.com/questions/12940974/maintain-model-of-scope-when-changing-between-views-in-angularjs — Vojtiik, Oct 16 '14 at 09:29

score 0 · Answer 1 · edited May 23 '17 at 11:58

I so deeply sympathize with your question. It took me so long to grasp this concept in angularjs.

The short response is that in your other controller (home controller) you should do the same call as above.

You have probably read over and over again that services and factories are singeltons, in this case http is your service / factory (advanced readers: it is actually a provider, but I am trying to keep it simple), so every time you call it, angular is repsonsible to retrieve it only if needed.

Every controller should populate its scope with its data ($scope.something =). You can wrap the http calls with $resource or restangular. But my suggestion for you is to start with $http, and once you get the feeling of it move on to others.

The article that @vojtiik mentioned is also a very good reading.

score 0 · Answer 2 · answered Sep 17 '15 at 10:20

Its pretty late for an answer but I ended up in a similar problem recently. $rootScope is a global scope variable available to every controller in every page. I assume "myController" is the same controller being used in your other view(home.html). Your code would now look like

$rootScope.objects = data;

The variable objects is now globally available.

Angularjs scope variable lost when loading another page

2 Answers2