How can i use $http in a constant decleration - angularjs

Question

Explaining the problem:
So in the current app we have a couple of constant configuration declarations that connects the app to either the production or development environment, and we comment one out whenever we want to switch which doesn't seem like the ideal scenario to me. So what I was after is having a configuration external json file that contains the values and have that file separately from the changing code and get values from there into my constant.
The actual question:
In this piece of code:
application.constant('servicesConfig', (function() {
var con = 'appdev';
//var con = 'appprod';
return {
host: con+'.appdomain.com'
}
}
As you can see I have to modify the 'con' variable manually in order to switch between the dev and prod environments, instead, I want to do the following:
application.constant('servicesConfig', (function() {
var deferred = $q.defer();
var configLocation = 'config/server.json';
var configurations = $http.get(configLocation)
return {
host: configurations.con+'.appdomain.com'
}
}
My question is how can I get the $http or other angular services injected?

Answer 1

You can manually bootstrap angular after receive data from server.
Example on jsfiddle:
var app = angular.module("myApp", []);
app.controller("myController", function($scope, servicesConfig) {
console.log(servicesConfig);
$scope.model = servicesConfig.host;
$scope.reset = function() {
$scope.model = '';
};
});
angular.element(document).ready(function() {
//Simulate AJAX call to server
setTimeout(function() {
app.constant('servicesConfig', {
host: "appdev"
});
angular.bootstrap(document, ['myApp']);
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-cloak>
<div ng-controller="myController">
<input type="text" ng-model="model" /> {{model}}
<button ng-click="reset()">Reset</button>
</div>
</div>