Angular: how to build a directive to watch a text field - angularjs

Question

Hello it's recently when I started using directives in my angular app.
I am building a text search, so what am trying to do is to have a text field and watch it to call the search server whenever user types into the text field.
Here is the directive I've built for this:
angular.module('myApp.directives')
.directive('autoComplete', function($resource, API_URL) {
var url = API_URL + 'api/search';
function link(scope, element, attrs) {
scope.$watch(attrs.autoComplete, function(value) {
if(value === null || value === "" ){
return;
}
$resource(url)
.get(function(products) {
// $scope.items = products;
console.log(products);
}, function(response) {
console.log(response);
});
});
} // Function link
return {
link: link
};
});
This the text field used to write the text for search:
<input type="text" placeholder="Search" ng-model="keyword" auto-complete>
The problem is the search endPoint is only called once when I browse to the view even without type anything in the search field also the watcher don't working call isn't made to the search server when I type in the search field.
I tired another way since I'm not familiar with directives yet but I got the same behaviour:
$scope.keyword = null;
$scope.$watch(function() { return $scope.keyword; }, function (newVal, oldVal) {
if (newVal !== "" || newVal !== null) {
$resource(url)
.get(function(products) {
console.log(products);
}, function(response) {
console.log(response);
});
} else {
return;
}//else
});

Answer 1

You need to watch 'ngModel' attribute instead attribute 'autoComplete'