AngularJS global variable value show undefined in local function

Here is my code

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicPopup, $timeout, $ionicModal, $state, $http, $ionicLoading){
 var loginid; // global variable
    $scope.ajaxLogin = function(){
        $scope.show();
        var fn = document.getElementById("username").value;
        var pw = document.getElementById("password").value;
         $http({
        url: "myurl", 
        method: "POST",
        data: { username: fn, password: pw },
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}

        }).success(function(data, status, headers, config) {

       loginid = 1; // assigned Value 1
        if(status == 200) {
            alert(loginid); // it will show 1 in allert

            if(loginid != 0){

              $state.go('app.home'); 

            }else{

              $scope.showAlertError();
            }
          }

        })
      error(function(data, status, headers, config) {

       $scope.showAlertNetwork();

        });
          alert(loginid); // here it is undefined
      };
})

i want to make 1 value available in global to access to other functions as well. but its undefined even its in own end of the function.

but as i tested example. it works fine in normal code.

.controller('AppCtrl', function($scope, $ionicPopup, $timeout, $ionicModal, $state, $http, $ionicLoading) {
    var loginid;// globally Defined
    $scope.ajaxLogin = function(){
        loginid = 1;
    }

    $scope.myInfo = function(){
       alert(loginid);// even this also gives 1
    }

});