Satellizer and angular.js not sending token in hea

Question

I am working with angular.js and satelizer to do JWT Authentication on a REST API.

The authentication works fine and the page is sending the authorization header within 3 states. Here is my state provider:

$stateProvider
            .state('auth', {
                url: '/auth',
                templateUrl: '/views/login.html',
                controller: 'AuthController as auth'
            })
            .state('dashboard', {
                url: '/dashboard',
                templateUrl: '/views/dashboard.html',
                controller: 'DashboardController as dash'
            })
            .state('mitglieder', {
                url: '/mitglieder',
                templateUrl: '/views/mitglieder.html',
                controller: 'MitgliederController as mitglieder'
            })
            .state('neuesMitglied', {
                url: '/neuesMitglied',
                templateUrl: '/views/neuesMitglied.html',
                controller: 'NewMitgliederController as newMitglied'
            })
            .state('users', {
                url: '/users',
                templateUrl: '/views/main.html',
                controller: 'UserController as user'
            });
    });

But however, inside the state 'neuesMitglied' it suddenly does no longer send the authorization header and gets rejected by the rest api. My NewMitgliederController looks like this:

(function() {

'use strict';

angular
    .module('authApp')
    .controller('NewMitgliederController', NewMitgliederController);

function NewMitgliederController($auth, $state, $http, $rootScope, $scope) {

    var vm = this;

    vm.error;
    //vm.toAdd;
    //vm.rawImage;

    //Fetched Data
    vm.fetchedData;

    var fetchData = function() {

        $http.get('APIv1/Beitragsgruppen/list/').success(function (data) {
            vm.fetchedData.mitgliedsgruppen = data;

        }).error(function (error) {
            vm.error = error;
        });


    }


    angular.element(document).ready( function(){
        $('#mainNav ul, #mainNav li').removeClass('active');
        $('#mitgliederNav').addClass('active');
        fetchData();

    } );
  }
})();

Why is it not working inside this controller but in all other controllers, the $http.get ist working with authorization header?

EDIT

I tracked this behavior a little bit and found that something is removing the "Authorization" Header which has been set by the satellizer interceptor (for this controller request the method is fired and this header is really added by satellizer interceptor but it is getting removed afterwards and I dont't know where because I do not touch any header data or have own interceptors)... Is it a bug?

Answer 1

Try this one:

(function() {

'use strict';

angular
    .module('authApp')
    .controller('NewMitgliederController', NewMitgliederController);

function NewMitgliederController($http, $scope) {

    var vm = this;

    vm.error = {};
    vm.fetchedData = {};

    fetchData();

    function fetchData() {

        $http.get('APIv1/Beitragsgruppen/list/').then( function(res) {
            vm.fetchedData.mitgliedsgruppen = res;
            $('#mainNav ul, #mainNav li').removeClass('active');
            $('#mitgliederNav').addClass('active');
        }, function(err) {
            vm.error = err;
        });
    }
  }
})();