ng-model vs ng-bind

Both ng-model and ng-bind directives provide binding features, the difference is that ng-model provides 2 way data binding between the model and the view, while ng-bind provides only one way binding between model and view.

While using ng-model the model is initially bound to the view when the page loads, any further changes made to the view will get automatically updated in the model object.

While using ng-bind the model is initially bound to the view when the page loads, any further changes made to the view will not get updated in the model object.

The below example demonstrates the difference between using ng-model and ng-bind to bind the model to the view.

Using ng-model directive with a Controller

The core functionality of ng-model directive is to provide data binding between the model and the view in AngularJS. In the previous post ng-model directive we saw on how to use the ng-model directive to bind variables which were created using the ng-init directive, in this post we shall see on how to use ng-model to directive to bind the properties defined in the controller to the view.

In the following example we declare initialize the properties FName and Lname in the $scope in the controller.

ng-model directive

The core functionality of ng-model directive is to provides data binding between the model and the view in AngularJS. The ng-bind directive additionally provides validation, state management functionality.

The below example provides a basic implementation of data binding using ng-model