AngularJS ng-bind Directive
Learn how ng-bind displays scope data inside an HTML element without flickering raw template syntax while the page loads.
What ng-bind Does
The ng-bind directive tells AngularJS to replace the text content of an HTML element with the value of a scope variable. It behaves like a one-way version of the {{ }} expression syntax, but written as an attribute instead of inline text.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="greeting='Hello there'">
<p ng-bind="greeting"></p>
</div>
</body>
</html>ng-bind vs. Double Curly Braces
{{ greeting }} and ng-bind="greeting" produce the same rendered output, but they behave differently while the page is loading. Before AngularJS finishes compiling the page, {{ greeting }} can briefly appear as literal text on screen. ng-bind avoids that flash because the element starts empty and AngularJS fills in the text only once the value is known.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="city='Paris'">
<p>Using expression: {{ city }}</p>
<p>Using ng-bind: <span ng-bind="city"></span></p>
</div>
</body>
</html>Choosing Between Them
- Use {{ }} for most everyday text — it is shorter and easier to read in templates
- Use ng-bind on slow-loading or content-heavy pages to avoid a visible flash of raw {{ }} text
- Both are one-way: they display data but do not let the user edit it (use ng-model for editable fields)
ng-bind only ever writes plain, escaped text — if the scope value contains HTML tags, they are displayed as visible text rather than being rendered as markup. This keeps pages safe from accidentally injecting markup through data.
