AngularJS : {{ }} codes show for a split second

Question

How to avoid {{ }} codes from showing when the page is just starting up or loading AngularJS resources?

In my case, the {{ c }} is showing inside my dropdown which is really weird for my users.

I can't use ng-bind in my case because I am showing a variable from a ng-repeat inside the option html tags.

Here is the code,

<select ng-model="invoice.inCurrency">
    <option ng-repeat="c in invoice.currencies">{{ c }}</option>
</select>

Answer 1

Put ng-cloak at your controller definition (or wherever you don't want to see the template rendering... specs recommend placing it in small portions of the page):

<div ng-controller="MyCtrl" ng-cloak>

https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

You can also try to work with ng-bind instead of {{}} in your view. It is always possible, even in your code :

<select ng-model="invoice.inCurrency">
    <option ng-repeat="c in invoice.currencies" ng-bind="c"></option>
</select>

Please refer to this topic to see the advantages of ng-bind