Cannot use ng-model directly in search box


#1

I have met a issue that I cannot use ng-model directly in a search box. Here is the code

<div class="bar bar-subheader item-input-inset">
  <div class="item-input-wrapper">
  <i class="icon ion-ios7-search placeholder-icon"></i>
  <input type="search" ng-model="keywords" placeholder="Search" >
</div>

Whatever I typed in the search text area, console.log($scope.keywords) keep show the values undefined. But once I change ng-model from “keywords” to “search.words”, it works fine. And it triggers a different issue, which is when “search.words” becomes “”, console shows

TypeError: Cannot read property 'then' of undefined    angular.js:11496

I can’t understand what happened in my code. Could anyone explain it?