Two-way binding just means that:

1. When properties in the model get updated, so does the UI.
2. When UI elements get updated, the changes get propagated back to the model.

Also more

Refer this working code JsFiddle

$watch will watch the variable (ng-model) for any changes in this case and invokes the function. Even without adding $watch, whatever you type in the input box gets updated in the backend automatically. $watch is one way to check if the model is updated properly.

On clicking Login button the latest model value will be present in the controller.

$scope.$watch('user.firstName',function(){
        alert("Your name is changed to : "+$scope.user.firstName);
    });

In this basic example of angularjs we are using a directive ng-model. It has two-way data binding ($scope --> view and view --> $scope).$scope is an object which maintains an array $$watchers for each object bound to it and each object in this array has a key 'last' which stores the last updated value in the model.

<div ng-app>
  <div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{yourName}}!</h1>
  </div>
</div>

In this case "yourName" model is bound with $scope. So,angularjs internally looks up for change in this model using $watch and the digest cycle updated all the changes immediately to the view

 $watch(watchExpression, listener, [objectEquality]);//Registers a listener callback to be executed whenever the watchExpression changes.
 $digest();//Processes all of the watchers of the current scope and its children.

You can also look up for the change in the model in your angular controller as

$scope.$watch('yourName',function(){
    //do your stuff when the model changes
}); 

You'll see that if you change the view ie your inputbox,the model defined in ng-model is changed and this changed model reflects back to the view.

Two way data binding in angular:

It helps the user to pass the data from the component to view and from view to the component. so this will establish "bi-directional communication".

This can be achieved via [(ngModel)] and also known as 'banana-box syntax', refer it below for snippet to use:

import { Component } from '@angular/core'; 
 @Component({ 
   selector: 'app-example', 
   template: ` 
               Enter the value  : <input [(ngModel)] ='val'> 
               <br> 
                Entered value is:  {{val}} 
             ` 
}) 
export class AppComponent { 
   val: string = ''; 
}

Import FormsModule into app.module.ts to avoid Template parse error while using ngModel:

    import { FormsModule } from "@angular/forms"; 
    import { BrowserModule } from '@angular/platform-browser'; 
    import { AppComponent } from './app.component'; 
     @NgModule({ 
       imports: [BrowserModule, FormsModule], 
       declarations: [ AppComponent], 
       bootstrap: [AppComponent] 
    }) 

export class AppModule { }

I Hope it's clear.