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

Answer 1

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.

Answer 2

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.