title: How to hide element while loading in Angular js
body: <p>I have defined an error banner in my angular app which is supposed to be visible only when an error event is triggered and there it is supposed to be hidden when the page loads.</p>
  
  <p>Here is my jade code:</p>
  
  <pre><code>  div.container.content(ng-init='root.error.show = false')
      div.col-md-12.error-container.ng-cloak(ng-show='root.error.show')
        div.alert.alert-danger.alert-dismissible(role='alert')
          button.close(type='button')
            span(aria-hidden='true', ng-click='root.error.show = !root.error.show') &amp;times;
            span.sr-only Close
          p {{ root.error.message }}
  </code></pre>
  
  <p>My controller</p>
  
  <pre><code>exports.RootCtrl = function RootCtrl($scope, $log) {
    var self = this;
    this.error = {
      show: false,
      message: 'Oups, something wrong just happend'
    }
  
    $scope.$on('error', function(event, data) {
      self.error.show = true;
      self.error.message = data;
    })
  }
  </code></pre>
  
  <p>My problem is while angular is loading, the banner is visible with <code>{{ root.error.message }}</code> as an error message.
  I have tried using ng-cloak <code>(body(ng-cloak))</code> and <code>ng-init</code> to hide it but it is not working.</p>
  
  <p>I believe I can tweak the css to play with the display properties but this would be quite messy.</p>
  
  <p>What are the common best practices to solve this?</p>