title: AngularJS: How to prevent "code flash" in page while loading
body: <p>I have created a simple app using AngularJS. When I open the page for a second I see the screen below:</p>
  
  <p><img src="https://i.stack.imgur.com/MFYzs.png" alt="enter image description here"></p>
  
  <p>However, after the load is complete I see the loaded and styled content which is fine:</p>
  
  <p><img src="https://i.stack.imgur.com/nZd4J.jpg" alt="enter image description here"></p>
  
  <p>How do I prevent the flash of AngularJS code on my page ? Is this related to FOUC ?</p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html class="no-js" lang="en" ng-app="MainApp"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Foundation | Welcome&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/foundation.css" /&gt;
      &lt;script src="js/vendor/modernizr.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
      .row.full-width {
          width: 100%;
          margin-left: auto;
          margin-right: auto;
          max-width: initial;
      }
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-controller="MainCtrl"&gt;
      &lt;div class="off-canvas-wrap" data-offcanvas&gt;
          &lt;div class="inner-wrap"&gt;
              &lt;nav class="tab-bar"&gt;
                  &lt;section class="right-small"&gt;
                      &lt;a class="right-off-canvas-toggle menu-icon" href="#"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;/section&gt;
                  &lt;section class="left tab-bar-section"&gt;
                      &lt;h1 class="title"&gt;Salary Calculator&lt;/h1&gt;
                  &lt;/section&gt;
              &lt;/nav&gt;
  
              &lt;aside class="right-off-canvas-menu"&gt;
                  &lt;ul class="off-canvas-list"&gt;
                      &lt;li&gt;
                          &lt;label&gt;Location&lt;/label&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;United Kingdom&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/aside&gt;
  
              &lt;section class="main-section"&gt;
  
  
                  &lt;div class="row full-width"&gt;
                      &lt;div class="large-4 columns"&gt;
  
                          &lt;ul class="tabs" data-tab&gt;
                              &lt;li class="tab-title active"&gt;&lt;a href="#panel1"&gt;Annual Salary&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="tab-title"&gt;&lt;a href="#panel2"&gt;Monthly Expenses&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;div class="tabs-content"&gt;
                              &lt;div class="content active" id="panel1"&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="large-12 columns"&gt;
                                          &lt;input ng-change="calculate()" type="text" placeholder="Salary" ng-model="salary"/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="content" id="panel2"&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="large-4 columns"&gt;
                                          &lt;input ng-change="calculate()" type="text" placeholder="Rent" ng-model="rent" /&gt;
                                      &lt;/div&gt;
                                      &lt;div class="large-4 columns"&gt;
                                          &lt;input ng-change="calculate()" type="text" placeholder="Wireless, TV, Home Phone" ng-model="telecom"/&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="large-4 columns"&gt;
                                          &lt;input ng-change="calculate()" type="text" placeholder="TV License" ng-model="tv" /&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="row"&gt;
                                      &lt;div class="large-4 columns"&gt;
                                          &lt;input ng-change="calculate()" type="text" placeholder="Mobile Phone" ng-model="mobile"/&gt;
                                      &lt;/div&gt;
                                      &lt;div class="large-4 columns"&gt;
                                          &lt;input ng-change="calculate()" type="text" placeholder="Subscription" ng-model="subscription"/&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="large-4 columns"&gt;
                                          &lt;input ng-change="calculate()" type="text" placeholder="Electricty" ng-model="electricity" /&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="row"&gt;
                                      &lt;div class="large-4 columns"&gt;
                                          &lt;input ng-change="calculate()" type="text" placeholder="Food" ng-model="food"/&gt;
                                      &lt;/div&gt;
                                      &lt;div class="large-4 columns"&gt;
                                          &lt;input ng-change="calculate()" type="text" placeholder="Transport" ng-model="transport" /&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="large-4 columns"&gt;
                                          &lt;input ng-change="calculate()" type="text" placeholder="Charity" ng-model="charity"/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="row"&gt;
                                      &lt;div class="large-12 columns"&gt;
                                          &lt;input ng-change="calculate()" type="text" placeholder="Other" ng-model="other"/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                      &lt;div class="large-8 columns"  ng-cloak &gt;
                          &lt;table &gt;
                         &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th width="200"&gt;&lt;/th&gt;
                                  &lt;th width="250"&gt;Yearly&lt;/th&gt;
                                  &lt;th width="250"&gt;Monthly&lt;/th&gt;
                                  &lt;th width="250"&gt;Weekly&lt;/th&gt;
                                  &lt;th width="250"&gt;Daily&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody ng-repeat="val in results"&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;{{val.rowType}}&lt;/td&gt;
                                  &lt;td&gt;{{val.yearly}}&lt;/td&gt;
                                  &lt;td&gt;{{val.monthly}}&lt;/td&gt;
                                  &lt;td&gt;{{val.weekly}}&lt;/td&gt;
                                  &lt;td&gt;{{val.daily}}&lt;/td&gt;
  
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                          &lt;/table&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
  
              &lt;/section&gt;
  
              &lt;a class="exit-off-canvas"&gt;&lt;/a&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="../bower_components/angularjs/angular.js"&gt;&lt;/script&gt;
  
  
      &lt;script src="js/app-service.js"&gt;&lt;/script&gt;
      &lt;script src="js/app-controller.js"&gt;&lt;/script&gt;
      &lt;script src="js/app-directives.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/vendor/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="js/foundation.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
      $(document).foundation();
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong><em>EDIT:</em></strong></p>
  
  <p>Please see <a href="https://stackoverflow.com/a/34255687/586986">my answer</a> as well for an alternative solution in addition to the accepted one.</p>