$scope variable not passed to the request header / undefined value

I am trying to get the last call in below code working but have an issue with $scope.token variable. It is passed to the service with undefined value. I tried to pass one variable at a time into getAccessToken function but it is also not working. What is interesting, both $scope.client and $scope.tenant variables are passed properly.

I found a lot of resources regarding .service or .factory what would also let me separate this call into another controller but those are too advanced topics for a beginner.

I am new into programming at all, so probably I am making some kind of stupid mistake.

var defaultListApp = angular.module('defaultListApp', ['build', 'build_editors']);
defaultListApp.controller('authorizationCtrl', ['$scope', '$location', 'Restangular', '$http', function($scope, $location, Restangular, $http){

  Restangular.setBaseUrl('https://api.xxx.io/xxx/xxx/');
  Restangular.one('projects/' + Build.currentProjectId + '/clients').getList().then(function(items){
  $scope.items = Restangular.stripRestangular(items);
  console.log("ITEMS: " + $scope.items);
},function(error){
  //handle error
});

$scope.selectClient = function(client) {
$scope.client = client.id;
Restangular.setBaseUrl('https://api.xxx.io/xxx/xxx/');
Restangular.one('projects/' + Build.currentProjectId + '/clients/' + $scope.client + '/credentials').get().then(
  function(response){
    $scope.credentials = Restangular.stripRestangular(response);
    $scope.clientId = $scope.credentials[0].clientId;
    $scope.clientSecret = $scope.credentials[0].clientSecret;
    $scope.getAccessToken($scope.client, $scope.clientSecret);
    $scope.tenant = Build.currentProjectId;
    $scope.getAppRepresentation($scope.client, $scope.tenant, $scope.token);
});
};

$scope.getAccessToken = function(oauthPayload){
$http({
                method: 'POST',
                url:  'https://api.xxx.io/xxx/oauth2/token',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: 'grant_type=client_credentials' +
                '&scope=xxx.view xxx.manage' +
                '&client_id=' + $scope.clientId +
                '&client_secret=' + $scope.clientSecret
            }).then(function(response) {
                $scope.token = response.data.access_token;
                $scope.getAppRepresentation($scope.client, $scope.tenant, $scope.token);
                var path = "/calls.html";
                window.location.href = path;


            })
          };

$scope.getAppRepresentation = function(getApp){
$http({
                method: 'GET',
                url:  'https://api.xxx.io/xxx/documents/' + $scope.tenant + '/' + $scope.client,
                headers: {'Authorization': 'Bearer ' + $scope.token }
                  }).then(function(response) {
                $scope.appData = response.data;
                console.log($scope.appData);
            })
          }

Solution

You aren't waiting for $scope.getAccessToken() to complete before trying to use the token in $scope.getAppRepresentation()

Can do it this way:

$scope.getAccessToken = function(oauthPayload){
    // return promise 
    return $http({.......})
}

then change sequence of calling:

$scope.getAccessToken($scope.client, $scope.clientSecret);    
$scope.getAppRepresentation($scope.client, $scope.tenant, $scope.token);

$scope.getAccessToken($scope.client, $scope.clientSecret).then(function(){
     $scope.getAppRepresentation($scope.client, $scope.tenant, $scope.token);
});

Note: There is no reason to define every function as part of $scope if you only use them internally within controller and don't need them in the view. In fact is a bit confusing