At the moment, I have implemented a text input linked to a model using a $scope.watch statement to observe changes in the model. The purpose of this setup is to create an auto-complete / typeahead feature.
<!-- HTML -->
<input type="text" ng-model="search.mySearchText">
// JS
var deregister = $scope.$watch('search.mySearchText', doSearch);
function doSearch() {
mySearchService.executeSearch(search.mySearchText)
.then(function(res) {
// handle the data
});
}
Although everything functions as intended, occasionally within the .then function I need to modify the value of search.mySearchText. This, however, triggers the watcher again, which is not desired.
I am looking for a way to prevent the $watch from triggering next time; possibly by indicating to Angular that the watched model property is no longer dirty?
My attempt at removing the $watch by de-/re-registering it during appropriate times did not work successfully.
function doSearch() {
mySearchService.executeSearch(search.mySearchText)
.then(function(res) {
deregister(); // stop watching
search.mySearchText = 'some new string'; // update the model without triggering another search
deregister = $scope.$watch('search.mySearchText', doSearch);
});
}
Unfortunately, this method did not achieve the expected result of preventing the event from firing, leading me to seek alternate ways to suppress the trigger.