SoFunction
Updated on 2025-04-11

Detailed explanation of the difference between ng-bind and ng-model in Angular

The difference between ng-bind and ng-model

AngularJS data bindings include ng-bind and ng-model, which are generally used as follows:

<input ng-model="">
<span ng-bind=""></span>

ng-bind is a one-way binding that acts on $scope to the view layer and cannot be displayed in HTML controls (HTML controls include: input, select, button and textarea).

ng-model is a two-way binding, $scope<--->view layer.

{{}} is used to display data.

Complete code

&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;meta charset="utf-8"&gt; 
&lt;head&gt; 
&lt;style&gt; 
div textarea{ 
 background-color:yellow; 
} 
&lt;/style&gt; 
&lt;script src="/libs//1.4.6/"&gt;&lt;/script&gt; 
&lt;/head&gt; 
&lt;body ng-app="myNoteApp"&gt; 
&lt;div class="aa" ng-controller="myNoteCtrl"&gt; 
&lt;h2&gt;My Notes&lt;/h2&gt; 
&lt;p&gt; 
&lt;textarea ng-model="message" rows="10" cols="20" maxlength="100"&gt; 
&lt;/textarea&gt; 
&lt;/p&gt; 
&lt;p&gt; 
&lt;button ng-click="save()"&gt;save&lt;/button&gt; 
&lt;button ng-click="clear()"&gt;Clear&lt;/button&gt; 
&lt;/p&gt; 
&lt;p&gt;Number of characters left: &lt;span ng-bind="left()"&gt;&lt;/span&gt;&lt;/p&gt; 
&lt;p&gt;Number of characters left(method2): &lt;span&gt;{{leftvar}}&lt;/span&gt;&lt;/p&gt; 
&lt;/div&gt; 
&lt;script&gt; 
var app = ("myNoteApp",[]); 
("myNoteCtrl",function($scope){ 
  $ = ""; 
  $ = 0; 
  $ = function() {$ = 100 - $;return $;}; 
  $ = function() {$ = "";}; 
  $ = function() {alert("Note Saved");}; 
}); 
&lt;/script&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Thank you for reading, I hope it can help you. Thank you for your support for this site!