How to use a variable in the angular config

Question

I'm trying to dynamicly set the color of the Angular MD theme in the config of my angular code. But I can't seem to change it... I want the primaryPalette to change to the variable color when it's changed by the themeChangerAdjustment trigger.

var color = red;

angular.module('myApp', ['ngResource', 'ui.router', 'ui.bootstrap', 'ngMaterial'])
.config(['$mdThemingProvider', function($mdThemingProvider) {
    $mdThemingProvider.theme('default').primaryPalette(color).accentPalette('orange');
}])

.run(['$log','$rootScope', 'themeChangerService', function($log,$rootScope, themeChangerService){
    $rootScope.$on('themeChangerAdjustment', function(){
        alert(themeChangerService.themes.color);
        color = themeChangerService.themes.color; //works
    });
    themeChangerService.prepForAdjustment(1);
}]);

Answer 1

You can declare a provider that will be accessible in the config block, see doc

angular.module('myApp', ['ngResource', 'ui.router', 'ui.bootstrap', 'ngMaterial'])
    .provider('color', function(){
        var color = 'red'
        return {
            value : color,
            $get : function(){
                return {
                    value : color
                };
            }
        };
    })
    .config(function(colorProvider){
        console.log('color in config :',colorProvider.value);
        //you config here
    })
    .controller('myCtrl',function(color){
        console.log('color in ctrl :', color.value);
    });

see JSFiddle demo here