With the following call in the index.html file, all 5 Json files are read and fill there into the objects with the same name on $rootScope.

Notice: When rendering Html tags handled by AngularJs it is advisable to mask the tags. Without a mask, they are manipulated by Angular before they are displayed. It is sufficient to use the code "&lt;" instead of the sign "<".
<ea-load-json data-content-folder="content" data-json-folder="json" data-json-files="naviList, paramsApp, objBg, imgBoxList, newsList"> </ea-load-json>
Since reading the Json files is an asynchronous call, it must be ensured for safe further processing that the corresponding objects are also filled.
When the list [?] is loaded, a parameter $rootScope.isLoaded_[?] is set to 'true'
and an event "LoadJsonFile-[?]" is fired. You can whait for finish the loading by the call e.g. for the file "naviList": $rootScope.$on("LoadJsonFile-naviList", function(evt, opt) { $scope.naviList = $rootScope.naviList; });