ng-model-options is a directive that was introduced with angular 1.3. It is really helpful when for example you're working with form inputs that has one or several watchers bound to them. Say for example you have a text input that fires a request to a search engine when the model is updated.
Simply binding the model to an input and triggering the
$http when the
$watch callback is fired is one way to go. But that means that the request will be fired for every letter you type. Not very efficient.
debounce option you can specify a delay after which the change of the model will occur, if another change occurs before the debounce timer finishes, it resets. Below is an example of using debounce vs just binding an input to update a model:
See the Pen pJMPod by Erik Svedin (@svdn) on CodePen.
Another feature with
ng-model-options is the
updateOn option. It lets you specifiy when your model will be updated. Possible options are DOM events such as
mouseover, but also
default which as you guessed is the default behaviour. This is also a great tool for controlling when your models should be updated, rather than running a ton of watch callbacks for every keystroke.
updateOn:'blur' in action below:
See the Pen eNqWRP by Erik Svedin (@svdn) on CodePen.