In AngularJS, two-way data binding continuously monitors model variables for changes. This can lead to performance issues when dealing with large datasets or complex applications. To optimize performance, AngularJS provides one-time binding (::), which binds a value only once and stops watching it after the initial evaluation.
1. What is One-Time Binding (::)?
One-time binding (::) tells AngularJS to evaluate an expression only once and then remove it from the digest cycle. Once the data is assigned, AngularJS no longer tracks changes, reducing the number of watchers and improving performance.
Example (Without One-Time Binding)
<p>{{user.name}}</p>
Here, AngularJS continuously watches user.name for changes, even if it doesn’t change frequently.
Example (With One-Time Binding)
<p>{{::user.name}}</p>
Now, user.name is evaluated only once, and AngularJS stops watching it, reducing memory usage.
2. How One-Time Binding Works
When AngularJS encounters ::, it:
Evaluates the expression once
Updates the value in the DOM
Removes the watcher, improving performance
Does not update the value again (unless the controller reloads)
When to Use One-Time Binding?
Use one-time binding for static or rarely-changing data, such as:
User profile details
Configuration settings
Static lists or dropdowns
Initial form data
3. One-Time Binding in Different Use Cases
3.1 One-Time Binding in Expressions
Example:
<h1>{{::appTitle}}</h1>
Here, appTitle is set once and will not be updated again.
3.2 One-Time Binding in ng-repeat
When displaying static lists, using :: significantly improves performance by reducing watchers.
Example:
<ul>
<li ng-repeat="item in ::items">{{::item.name}}</li>
</ul>
This prevents AngularJS from tracking every item’s changes.
3.3 One-Time Binding in ng-if and ng-show
If a condition is static, use :: to improve performance.
Example (ng-if):
<div ng-if="::isAdmin">
<p>Welcome, Admin!</p>
</div>
If isAdmin is true at the start, the element remains in the DOM and AngularJS stops watching it.
Example (ng-show):
<p ng-show="::isFeatureEnabled">New Feature Enabled!</p>
AngularJS evaluates isFeatureEnabled once, reducing digest cycle checks.
3.4 One-Time Binding in ng-src and ng-href
Example (ng-src for images):
<img ng-src="{{::user.profileImage}}" alt="Profile">
Once user.profileImage is loaded, AngularJS stops tracking it.
Example (ng-href for links):
<a ng-href="{{::user.profileLink}}">Visit Profile</a>
This improves page load speed.
3.5 One-Time Binding in Controllers ($scope or ControllerAs Syntax)
In controllers, assign values using $scope or this, and use :: in templates.
app.controller("UserController", function($scope) {
$scope.user = {
name: "Narendra",
age: 25,
city: "Hyderabad"
};
});
HTML:
<p>{{::user.name}}</p>
<p>{{::user.age}}</p>
<p>{{::user.city}}</p>
This binds the values once, reducing performance overhead.
4. Performance Comparison (With & Without ::)
Without One-Time Binding (High Memory Usage)
<ul>
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
AngularJS watches every item continuously, slowing down large lists.
With One-Time Binding (Optimized Performance)
<ul>
<li ng-repeat="item in ::items">{{::item.name}}</li>
</ul>
AngularJS renders the list once and stops tracking changes, making it faster.
5. When NOT to Use One-Time Binding
Avoid :: when:
Data frequently updates (e.g., live scores, real-time dashboards)
You need two-way data binding (e.g., form inputs)
The value depends on user interactions
Example of incorrect usage:
<input type="text" ng-model="::user.name">
Here, AngularJS will never update user.name because ng-model needs continuous tracking.