Best way to pass variables between controllers

Question

I am using three Angular controllers:

**Controller1**

var fetchStudentDetails = function(){
    var sDetails = myService.getList(//url-1 here);
    sDetails.then(function (data) {
            $scope.studentData = data.list;
            var studentId = $scope.studentData[0].id;
    });
}
fetchStudentDetails();
$scope.loadSecondLevel = function(){
                $state.go('secondLevel');               
              }


**Controller2**

    var fetchClassDetails = function(){
    var sDetails = myService.getList(//url-2 here);
    sDetails.then(function (data) {
            $scope.classData = data.list;
            var className = $scope.classData[0].name;
    });
    }
    fetchClassDetails();
    $scope.loadThirdLevel = function(){
        $state.go('thirdLevel');                
    }

**Controller3**

   $scope.putStudentDetails = function(){
   // Here I need studentId,className for updateResource
        var sDetails = myService.updateResource(//url-3 here);
        sDetails.then(function (data) {

        });     
    }

Where I have to pass studentId (in Controller1), className (in Controller2) into a function which in Controller3. I tried with $rootScope, it is working but when refresh the page $rootScope values become empty. Does anyone know how to do this?

Answer 1

Your question could be split into two aspects:

1. How to share data between controllers
The best practice to share data in Angular 1.x is using factory, store the shared data in a factory service, and expose access methods to controllers:

factory('DetailData', function(myService, $q){

     var _details;

     function __getDetailData(){
           return details
     }

     function __setDetailData(){
          return myService.getList().then(function(data){
              _details = data;
          })
     }

     return {
         getDetailData: __getDetailData,
         setDetailData: __setDetailData
     }

})


controller('myContrller', function(DetailData, $scope){
    $scope.data = DetailData.getDetailData();
})

2. How to persist data when page refreshed,
you can use localStorage to keep data persistent during page reloading, many tools & libraries can achieve this, for example ngStorage, or you could reset the data from server every time your angular application started:

//this would register work which would be performed 
//when app finish loading and ready to start. 
angular.module('app').run(function(DetailData){

    DetailData.setDetailData();

})

Answer 2

Depending on what problem you are solving. There are three options:

1. Is to save data to $rootScope
2. Is to use $scope.$emit & $scope.$on functions.
3. Use a custom Service to store the data

And if you need to save data, so it was available after full page reload - localStorage.

Answer 3

Hey this question are responded in Passing data between controllers in Angular JS?

But the simple response is in the services.