如何防止在对象完全加载到$ scope中之前加载DOM？

Question

I am loading a JSON that is almost 19,000 lines...minified to a single line its about 240k. I am loading it into my app via index.html file as a global var:

<script type="text/javascript" src="js/cdjson.js"></script>

var _countries = {
   "country": {
      "USA": {
         "currency": {
            "currencyCode":["USD"],
                "currencyName":["United States Dollar"],
                "currencySymbol":["&#36;"]
         },
         "info": { 
               ...
               ...
         },
         "phone" : {
               ...
         },
         "postal" : {
               ...
         }
      },
      "CAN" : {
         ...
      }
   }
}  

In the the controller its being assigned to a $scope variable $scope.countries = _countries.country ; . However, when the html DOM for that controller loads its trying to access the $scope variable before before the object is fully loaded into the $scope causing JS object errors like Cannot read property 'country' of undefined .

How can I prevent the page from rendering until the $scope object is fully loaded? The $scope country object is being used in a <select ng-repeat="countries as country">

Answer 1

Have a flag that indicates when the data was fully loaded to the controller. Something like

<select ng-if="countries.length" ng-repeat="countries as country">

Answer 2

Ideally your js files should be loaded at the end of your HTML so you dont have this problem. But if that is not an option for you then add this in your controller

$scope.countries = []
angular.element(document).ready(function () {
    $scope.countries = _countries.country;
});

and in your HTML

<select ng-if="countries.length" ng-repeat="countries as country">