Two Way Data Binding

• In Angular applications, the view is the Document Object Model (DOM), the controllers

are JavaScript classes, and the model data is stored in object properties.

• Two way data binding happens in angularjs.  

1. When model is updated view is updated automatically. Here $scope.name is model which is updated in controller. We can see the change is reflected in textbox(view).
2. When we change something in textbox(view) we can see the {{name}} is nothing but the model property which we are binding it to p tag gets updated automatically.

This is two way data binding.

Writing controller in this way also works

• angular.module('myapp')

         .controller('myController',function($scope) {

          $scope.name = "She is beautiful lady";

        });

• angular.module('myapp')

         .controller('myController', ctrlFunction);

         ctrlFunction.$inject = ['$scope'];

         function ctrlFunction($scope) {

         $scope.name = "She is beautiful lady";

       }

• angular.module('myapp')

         .controller('myController', ctrlFunction);

         function ctrlFunction($scope) {

         $scope.name = "She is beautiful lady";

       }

• With Closure
• (function() {

          angular.module('myapp')

         .controller('myController', ctrlFunction);

            function ctrlFunction($scope) {

           $scope.name = "She is beautiful lady";

          }

        }());