How to retrive a $scope value outside the function it is defined, in Angular JS

Question

I have the Controller

function loginController($scope, $http, $cookieStore, $location) {
var token = $cookieStore.get('token');
var conId = $cookieStore.get('Cont_Id');
var exId = $cookieStore.get('ex_Id');
    $scope.log_me = function() {
    $scope.login_me = [];
    var login_un = $scope.uservals;
    var login_pwd = $scope.passvals;
    var logs_me = "api call here";
    $http.get(logs_me)
        .success(function(response) {
            $cookieStore.put('token', response.token);
            $cookieStore.put('ex_Id', response.ExId);
            $cookieStore.put('Cont_Id', response.contactId);
            $cookieStore.put('email', response.email);
            $cookieStore.put('name', response.name);
            $scope.log_sess = response;
            $scope.sess_id= response.ss_id;
            alert($scope.sess_id);
            if (response.status == "failure, invalid username or password") {
                $('.login_error').show();
                $('.login_error').html('Invalid username or password');
                $('.login_error').delay(4000).fadeOut();
                $('.loading').hide();
            } else {
                $location.path('/dashboard');
            }
        });
  }

}

I have used the above controller in my login page and it is working fine. Now i want to use the same controller in another template and retrieve the value "$scope.sess_id"

My Template is

 <div class="page" >
 <style>
 #report_loader object {
   width: 100%;
   min-height: 700px;
   width:100%;
   height:100%;
 }
 </style>
 <div class="loading"> </div>
 <section class="panel panel-default" data-ng-controller="loginController">
        <div class="panel-body" style=" position: relative;">
            <div id="report_loader" style="min-height:600px;">
            {{sess_id}}
             <script type="text/javascript">
                $("#report_loader").html('<object data="https://sampleurl/contact/reports/members/sorted_list.html?ss_id=' + sess_id+' />');
            </script>
            </div>
            </div>
    </section>
 </div>

I am unable to retrieve the value {{sess_id}} here. What should be done so that i can bring this value in my template

`sess_id` is defined in success callback of `$http` call, are you sure it was successful and you waited for end of call? — Rasalom, Dec 09 '14 at 08:06
personally, i would set the value at the `$rootScope` level, that way you know it will be available from the other controller. Otherwise, create a controller that is the parent of both `loginController` and your new page's controller, and add the scope value there. this should mean both child controllers have access to it either directly or via `$parent` — haxxxton, Dec 09 '14 at 08:07
Yes. it is successful and i checked it in alert($scope.sess_id); @Rasalom — Sha, Dec 09 '14 at 08:11
I am using the same loginController in the new template so that i dont need to create a new controller for this purpose. Hope this is fine @haxxxton — Sha, Dec 09 '14 at 08:13

score 0 · Answer 1 · edited May 23 '17 at 12:14

You're routing the user to the "dashboard" route upon successful log in. Even though it might feel like you're using the same "loginController" for both login and dashboard, it will be an entirely new instance of both the controller and $scope. Which is why the {{sess_id}} is not displaying on the dashboard template.

If you're following an MVC-like pattern of AngularJS, ideally you want to be creating a new controller for your dashboard template. See explanation: https://docs.angularjs.org/guide/controller#using-controllers-correctly

So, I would create a DashboardCtrl and share the sess_id between the two. There are plenty of examples out there of how to share data between controllers:

You can use a factory: Share data between AngularJS controllers
You can use $rootScope: How do I use $rootScope in Angular to store variables?

Hope it helps.

score 0 · Answer 2 · answered Dec 10 '14 at 01:41

I would use the rootScope approach, but an easier way to do that is to simply create a 'global' variable.

In your main controller (not your login controller), define a global scope variable like this:

$scope.global = {};

Then in your login controller, modify your session id to use the global variable:

$scope.global.sess_id= response.ss_id;
alert($scope.global.sess_id);

Then in your html:

<div id="report_loader" style="min-height:600px;">
{{global.sess_id}}

It's simple and works like champ.

score 0 · Answer 3 · answered Dec 10 '14 at 01:49

I would create a service :

services.sessionService = function(){

    var sessionID = null;

    this.setSessionID = function(id){
         sessionID = id; 
    }
    this.getSessionID = function(){
        return sessionID;
    }
}

then in your controller :

$scope.sess_id= response.ss_id;
alert($scope.sess_id);
sessionService.setSessionID( $scope.sess_id );

and in your dashboard controller :

$scope.sess_id = sessionService.getSessionID();

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

Approaches

Your question's answer has many approach. They are:

Using value or service, you can call it wherever your controllers need them.
Using $rootScope, this is very common and easy to use. Just define your $rootScope inside your main controller or whatever controller that called first and then you can call it from other controllers like any $scope behavior.
Using $controller service or usually called controller inheritance. Define this in controller function's parameter, then type $controller('ControllerNameThatIWantToInheritance', {$scope:$scope});

Maybe any other approach can be use to it. Each of them have strength and weakness.

Examples:

using value

.value('MyValue', {
  key: null
})

.controller('MyCtrl', function ($scope, MyValue) {
  $scope.myValue = MyValue;
})

you can modified MyValue from service too

using `$rootScope`

.controller('FirstCtrl', function ($scope, $rootScope) {
  $rootScope.key = 'Hello world!';
})

.controller('SecondCtrl', function ($scope, $rootScope) {
  console.log($rootScope.key);
})

will print 'Hello World', you can also use it in view <div>{{key}}</div>

using `$controller`

.controller('FirstCtrl', function ($scope) {
  $scope.key = 'Hello world!';
})

.controller('SecondCtrl', function ($scope, $controller) {
  $controller('FirstCtrl', {$scope:$scope});
})

Second controller will have $scope like first controller.

Conclusion

In your problem, you can split your controller for convenient. But if you dont' want to, try to define $scope.sess_id first. It will tell the Angular that your sess_id is a defined model, and angular will watch them (if you not define it first, it will be 'undefined' and will be ignored).

function loginController($scope, $http, $cookieStore, $location) {
var token = $cookieStore.get('token');
var conId = $cookieStore.get('Cont_Id');
var exId = $cookieStore.get('ex_Id');
$scope.sess_id = null                   //<- add this
$scope.log_me = function() {
  $scope.login_me = [];
  var login_un = $scope.uservals;
  var login_pwd = $scope.passvals;
  var logs_me = "api call here";
  $http.get(logs_me)
    .success(function(response) {
        $cookieStore.put('token', response.token);
        $cookieStore.put('ex_Id', response.ExId);
        $cookieStore.put('Cont_Id', response.contactId);
        $cookieStore.put('email', response.email);
        $cookieStore.put('name', response.name);
        $scope.log_sess = response;
        $scope.sess_id= response.ss_id;
        alert($scope.sess_id);
        if (response.status == "failure, invalid username or password") {
            $('.login_error').show();
            $('.login_error').html('Invalid username or password');
            $('.login_error').delay(4000).fadeOut();
            $('.loading').hide();
        } else {
            $location.path('/dashboard');
        }
    });
  }
}