including external js file into angular

Question

I have a java script file that contains a config object for decoding a lot of business jargon for ease of use in my application.

How can I get that to be available to my angular app? I currently have it included in my html file above all the application files.

here is my config.js:

var config = {
    "metadata":[
              "8235205241531AF399B113140005492E":{
                    "name":"verison_number"
               }
     ]
 }

here is includes:

        <script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="libs/angular/angular.min.js"></script>
        <script src="libs/angular-resources/angular-resource.min.js"></script>
        <script src="libs/angular-route/angular-route.min.js"></script>
        <script src="js/config.js"></script>
        <script src="js/viewer.js"></script>
        <script src="js/controller.js"></script>
        <script src="js/services.js"></script>
        <script src="js/routes.js"></script>
        <script src="js/app.js"></script>

now here is my controller just trying to do a console.log on it:

var MainCtrl = angular.module('MainCtrl', []);


MainCtrl.controller('loader',['$scope','$rootScope','$http','startApp', function($scope,$rootScope,$http,startApp) {
    console.log(config);
    console.log('loading course...');
    console.log(startApp);
}]);

Answer 1

Your JSON is incorrect.

Here is the correct way for declaring config:

var config = {
"metadata":[
    {"8235205241531AF399B113140005492E":"verison_number"}
]}

Working Plunkr

Answer 2

Maybe using the value recipe. For example:

var app = angular.module('MainCtrl');

// later

app.value('myconfigs',config); // set your "object"

// somewhere in your controller code

MainCtrl.controller('loader',['$scope','$rootScope','$http','startApp','myconfigs', function($scope,$rootScope,$http,startApp, myconfig) {
    console.log(myconfig.metadata);
    console.log('loading course...');
    console.log(startApp);
}]);