Difference between expression, ng-bind and ng-model

By | September 18, 2017

ng-bind and {{}} are basically the same. However, before your application fully loads, sometimes {{}} are visible. ng-bind usually looks a little nicer before everything finishes loading.

ng-bind

If you have $scope.textFromComponent = "Superman" in your controller.

<span ng-bind="textFromComponent"></span> binds this value within this span element.

{{ }}

The same behaviour can be achieved using {{}}.

These set of curly-brackets are called Interpolation directives and they work as a short-hand to ng-bind. While using them you no more need to write ng-bind rather you directly bind them. Like:

<span>{{textFromComponent}}</span>

ng-model

<input ng-model="textFromComponent" />

binds this value to the value property of your input element. This binds the value two-way which means if you make any changes to $scope.textFromComponent in your code, it will reflect on screen automatically. At the same time, if user makes any change to it ( since they are interactive elements, user can change them) the changed value will be passed to your code.

Note:  ng-bind and {{}} both are one-way binding whereas ng-model is two-way binding.

I hope you will enjoy the difference between expression, ng-bind and ng-model in AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

 

Like it? Share it