Delaying header view rendering until model loaded to prevent flicker

Question

My page has header, content and footer.

<div id='header'></div>
<div data-ng-view=""></div>
<div id='footer'></div>

I have binding in header section, how can I delay header view rendering until model loaded to prevent flicker ? I do not want the user to see this while ajax data is loading.

I have checked this post, it only will works for the ng-view.

My page header and footer are part of the master page, they are not governed by $routeprovider

Answer 1

Try ng-cloak. It will hide the page until angularJS is ready.

Answer 2

Try adding a conditional attribute in the header tag.

<div id="header" ng-show="model_name"></div>