title: AngularJS Shows its own tags while page loads
body: <p>I am making an application with <strong>angular js</strong>. I am binding content in the page using <strong>{{ data.content }}</strong> method, this works fine, but while loading the web page browser shows the same code in the page.</p>
  
  <p>see the screenshot I've taken while page loading</p>
  
  <p><a href="http://s18.postimg.org/9l0f4522h/asd.png" rel="nofollow">click here</a></p>
  
  <p>is there any way to clear this without using <strong>ng-bind</strong> method ?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I have tried this method</p>
  
  <p>1 -added ng-clock for body</p>
  
  <pre><code>&lt;body ng-app="MyApp"   ng-cloack ng-controller="MyController" &gt;
  </code></pre>
  
  <p>2 -added css style for ng-clock</p>
  
  <pre><code>  [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
  }
  </code></pre>
  
  <p>but still the same problem persists. </p>
  
  <p>and I'm using latest version of both <em>chorme</em> and <em>mozilla firefox</em></p>