How to get the value in angularJS from the input box

This happens because your not initialize the name2 inside the controller. so there is no property called name2 in the scope at the moment of console.log . and name2 property will create on the scope right after your first change on the input. so thats why its getting undefined.

here is the Demo Plunker, check the console.

$scope.$watch('name2', function(newVal, oldVal) {
    console.log("new value : " + newVal);
    console.log("old value : " + oldVal);
});

i have added a $watch on name2 property (and this $watch function will execute when changing the value of name2), note that its undefined first and it will take the value of input right after you type something in the textbox.

try this

<div ng-app="" ng-controller="DemoController">
  {{ name2 }}
  <input type="text" placeholder="Lisa" ng-model="name2">
</div>

First, your controller is running before $scope.name2 even existed yet. You should have the console report the changes at some point AFTER. Remove that line from your code. (console.log...)

Whenever the text in name2 changes, $scope.name2 will be set to that value. You can see the effect if you ADD the following to the controller:

$scope.saveChanges = function () {
  alert($scope.name2);
}

And to the HTML:

<button ng-click="saveChanges()">See Value</button>

try to follow me on this one. On the first execution of the script, the variable (or property - doesn't really matter for this topic) is not declared. Once the interpreter reaches the console.log function, it tries to call name2's value, But as we said - it is not defined. In order to log the data you're binding, you should implement some logic that executes console.log only after a change or maybe even using $scope.apply. (I believe that $scope.apply is too far for you right now and you should ignore it). Bottom line is - Your variable is not defined for the first iteration, therefore you're getting this result.

You must submit form to get Values or you use Watch Function

function DemoController($scope) {
  $scope.name1 = 'LISA';
 

   
$scope.submitName = function () {
 console.log($scope.name2)
}    
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="DemoController">
  {{ name1 }}
  <input type="text" placeholder="Lisa" ng-model="name2">
<button ng-click="submitName()">click </button>
</div>

name 2 will change as you type in the input box. You can see this by adding

{{name2}}

to your html

the controller will not see the change in name2 unless you watch for it, you can do this using $watch, add this to your controller

   $scope.$watch('name2', function() {
    console.log($scope.name2);
    });

Put your ng model in watch for getting the updates

function DemoController($scope) {
  $scope.name1 = 'LISA';



 //this will work

 $scope.$watch(function(val){
  if(val){ 
 console.log($scope.name2);
 }
 });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="DemoController">
  {{ name1 }}
  <input type="text" placeholder="Lisa" ng-model="name2">
</div>