Can anyone explain the difference between expression, ng-bind and ng-model?

Question

I am very confuse between expression {{}}, ng-bind and ng-model. please explain with example if possible.

Answer 1

ng-bind and ng-model both are the inbuilt directives in Angular.

While ng-bind helps you to bind a value to innerHTML of an element, ng-model helps you bind the data to the interactive elements (i.e. <input>, <checkbox>, <textarea>), you got it..

Usage:

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.