Ng-model does not update controller value

Question

Probably a silly question, but I have my HTML form with simple input and button:

<input type="text" ng-model="searchText" /> 

<button ng-click="check()">Check!</button> 

{{ searchText }}

Then in the controller (template and controller are called from routeProvider):

$scope.check = function () { 

console.log($scope.searchText); 

}

Why do I see the view updated correctly but undefined in the console when clicking the button?

Answer 1

The best way would be to use component with Angular 2.x or Angular 1.5 or upper

Controller as version:

Here the template code:-

<div ng-app="example" ng-controller="myController as $ctrl">

   <input type="text" ng-model="$ctrl.searchText" /> 

   <button ng-click="$ctrl.check()">Check!</button> 

   {{ $ctrl.searchText }} 

</div>

The JS code:-

angular.module('example', []) 

  .controller('myController', function() { 

   var vm = this; 

   vm.check = function () { 

     console.log(vm.searchText); 

   }; 

});