One-time data binding (::) in AngularJS

In AngularJS, one-time data binding (::) is an efficient way to bind data only once to the view. It prevents unnecessary digest cycle updates, improving performance, especially in large applications.

What is One-Time Data Binding (`::`)?

One-time binding (::) ensures that an expression in AngularJS is evaluated only once, and after the initial value is set, it does not update even if the model changes.

Example of One-Time Binding

<p>Normal Binding: {{ user.name }}</p>
<p>One-Time Binding: {{ ::user.name }}</p>

The normal binding updates the UI whenever user.name changes.
The one-time binding (::user.name) sets the value once and does not change.

Why Use One-Time Binding?

Improves Performance – Reduces digest cycle execution.
Optimizes Static Data – Ideal for data that doesn’t change, like user profiles, app settings, or constants.
Prevents Unnecessary Watches – Angular removes one-time bindings from the watch list after initialization.

When to Use One-Time Binding?

Use :: when:

Data doesn’t change after loading (e.g., app settings, static user details).
Large lists where re-evaluating expressions can slow performance.
Fetching data from an API that is not expected to change.

How to Use One-Time Binding?

1️⃣ Basic Example

<p>Normal Binding: {{ user.name }}</p>
<p>One-Time Binding: {{ ::user.name }}</p>

::user.name is set once and does not update.

2️⃣ One-Time Binding with ng-bind

<p ng-bind="::user.name"></p>

Why?

Faster than {{ }} interpolation for large data.

3️⃣ One-Time Binding in ng-repeat

<ul>
  <li ng-repeat="user in ::users">{{ user.name }}</li>
</ul>

Optimizes large lists, reducing unnecessary digest cycles.

4️⃣ One-Time Binding with API Calls (`$http`)

<p>Name: {{ ::user.name }}</p>

$http.get("/api/user").then(function(response) {
  $scope.user = response.data;
});

✅ Updates once after API fetch, reducing performance overhead.

One-Time Binding & Watchers

AngularJS removes :: expressions from the watch list after assigning values, reducing performance overhead.

When NOT to Use One-Time Binding?

When Data Changes Frequently (e.g., live updates, form inputs).
When User Interaction Updates the Model.
Inside Two-Way Binding (ng-model).

🔹 Summary

Feature	Normal Binding	One-Time Binding (`::`)
Updates on Change?	Yes	No (only once)
Performance	Can slow down UI	Faster, fewer digest cycles
Use Case	Dynamic, frequently changing data	Static data (e.g., user profiles, settings)
Watcher Removal	Keeps watching	Removed after first evaluation

What is One-Time Data Binding (::)?