title: How to avoid screen flickering with AngularJs?
body: <p>I am new to angular. I used AngularJS to develop front end. But at initial level I face issue for flickering some content when page is load. </p>
  
  <p>My question is that when I run my app within localhost, sometimes it shows data binding expression on screen or it shows something crazy output on browser. I used <code>ng-clock</code> (suggest by angularjs docs) although my problem is not solved. </p>
  
  <p>My html file is too small and not doing many thing although its flicker. Please note my script tag is placed on bottom. Please give me some idea to prevent this king of thing in AngularJS.</p>
  
  <h2>index.html</h2>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en" ng-app="app"&gt;
  
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="author" content=""&gt;
          &lt;title&gt;Sample App&lt;/title&gt;
          &lt;link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
          &lt;link rel="stylesheet" href="styles/cover.css"&gt;
          &lt;link rel="stylesheet" href="styles/sidebar.css"&gt;
          &lt;style type="text/css"&gt;&lt;/style&gt;
   &lt;script src="node_modules/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              window.jQuery || document.write('&lt;script src="node_modules/jquery/dist/jquery.min.js"&gt;&lt;\/script&gt;')
          &lt;/script&gt;
          &lt;script src="node_modules/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body ng-controller="mainCtrl" ng-cloak&gt;
          &lt;div class="site-wrapper"&gt;
              &lt;div class="site-wrapper-inner"&gt;
                    &lt;div class="masthead clearfix"&gt;
                        &lt;div class="inner"&gt;
                            &lt;div ng-include src="'views/header.html'"&gt;&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="inner" ng-clock&gt;
                          &lt;div ng-if="hasSidebar" ng-include src="'views/sidebar.html'" id="sidebar" ng-cloak&gt;&lt;/div&gt;
                          &lt;div id="view" ng-view&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="mastfoot"&gt;
                        &lt;div class="inner"&gt;
                            &lt;p&gt;Cover template&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script src="node_modules/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
  
          &lt;script src="controllers/app.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>
  
  <h2>header.html</h2>
  
  <pre><code>&lt;h3 class="masthead-brand"&gt;Cover&lt;/h3&gt;
  &lt;nav&gt;
      &lt;ul class="nav masthead-nav"&gt;
          &lt;li class="active"&gt;&lt;a ng-href="#/home"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a ng-href="#/features"&gt;Features&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a ng-href="#/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a ng-href="#/dashboard"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <h2>sidebar.html</h2>
  
  <pre><code>&lt;ul class="list-unstyled"&gt;
      &lt;li&gt;&lt;a href="#"&gt;link1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link5&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;link6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h2>dashboard.html</h2>
  
  <pre><code>&lt;div id="content"&gt;
    &lt;h1&gt;Dashboard&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>