The ng-model directive binds the value of HTML controls (input, select, text area) to application data.
Two-Way Binding
The binding goes both ways. If the user changes the value inside the input field, the AngularJS property will also change its value.
In the example, we are using the model to bind user first and last name into one full name. We can achieve this with help of ng-model, ng-bind and ng-click.

<html ng-app="myApp">
<script src="js/angular.min.js"></script>
<body ng-controller="myCtrl">
<div >
  <p>Enter the First Name: <input type="text" ng-model="fname"></p>
  <p>Enter the Last Name: <input type="text" ng-model="lname"></p>
  <button ng-click="getFullName()">Get Full Name</button>

  Full Name : <label ng-bind="fullName"></label>

  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope){
    $scope.fname = "";
    $scope.lname= "";
    $scope.fullName ="";
    $scope.getFullName = function(){
      $scope.fullName = $scope.fname + " " + $scope.lname;
In this example we are using 4 model object, $compile will check what binding model is made in our application. We need a custom javascript function to handle all the binding for all above model object element. In AngularJs we can use the controller to handle this model.
The controller will have $scope as a reference to access the data binding of our application in our controller and we will use ng-controller to bind our controller in our template.
Note: Important we are not using onclick function event in our button,
<button onclick=”getFullName()” instead we are using  <button ng-click=”getFullName()”> where ng-click is angularjs directives. As event function like onclick, onkeyup are not recommended method in Angularjs, as the Angularjs will not be able to understand the specific event, as angularjs doesn’t have this event available when it comes to angular application.