AngularJS ng-non-bindable Directive Last Updated : 08 Aug, 2022 Comments Improve Suggest changes Like Article Like Report The ng-non-bindable Directive in AngularJS is used to specify that the specific content of HTML should not be compiled i.e the contents should be ignored by AngularJS. It can be used when we want to display code snippets instead of compiled output. Syntax: <element ng-non-bindable> Contents... </element> Example 1: This example uses ng-non-bindable Directive to ignore expression. HTML <!DOCTYPE html> <html> <head> <title>ng-non-bindable Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body ng-app="" style="text-align: center"> <h1 style="color:green">GeeksforGeeks</h1> <h3>ng-non-bindable Directive</h3> <div> The result of <span ng-non-bindable style="background-color:green; color:white"> {{5+5}} </span> is {{5+5}} </div> </body> </html> Output: Example 2: This example uses ng-non-bindable Directive to ignore expression. HTML <!DOCTYPE html> <html> <head> <title>ng-non-bindable Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body ng-app="app" style="text-align: center"> <h1 style="color:green">GeeksforGeeks</h1> <h3>ng-non-bindable Directive</h3> <div ng-controller="geek"> Input 1: <input type="number" ng-model="val1" /> <br><br> Input 2: <input type="number" ng-model="val2" /> <br><br> <input type="button" value="sum" ng-click="sum()" /> <br><br> <div>Without Non-Bindable: {{result}}</div> <div ng-non-bindable>With Non-Bindable: {{result}}</div> </div> <script> var app = angular.module("app", []); app.controller('geek', ['$scope', function ($scope) { $scope.sum = function () { $scope.result = $scope.val1 + $scope.val2; } }]); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article AngularJS ng-non-bindable Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-bind Directive The ng-bind Directive in AngularJS is used to bind/replace the text content of any particular HTML element with the value that is entered in the given expression. The value of specified HTML content updates whenever the value of the expression changes in the ng-bind directive. Syntax: <element ng 2 min read AngularJS ng-bind-html Directive The ng-bind-html Directive in AngularJS is used to bind the innerHTML of an HTML element to application data and remove dangerous code from the HTML string. $sanitize service is a must for the ng-bind-html directive. It is supported by all HTML elements. Syntax: <element ng-bind-html="expression" 2 min read AngularJS ng-bind-template Directive The ng-bind-template Directive in AngularJS is used to replace the content of an HTML element with the value of the given expression. It is used to bind more than one expression. It can have multiple {{ }} expressions. It is supported by all HTML elements. Syntax: The ng-bind-template Directive can 2 min read AngularJS ng-app Directive The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS applications. The ng-app directive declares only once in the HTML doc 1 min read AngularJS ng-dblclick Directive The ng-dblclick Directive in AngluarJS is used to apply custom behavior when an element is clicked double. It can be used to show or hide some element or it can popup an alert or change the color of text when it is clicked twice. This means that the element's original ondblclick event will not be ov 2 min read Like