Delaying model update in AngularJS

How to delay model updates in AngularJS?

In the previous post, we learnt how to attach custom trigger to update model. In this post, we shall learn how to delay model updates model after user action. This is done using ng-model-options directive with 'debounce: milliseconds' option.

In the <script> block, we have a PD object created with $scope whose properties will be set in the HTML blcok with the help of the ng-model directive of the input element.

<script>
    var app = angular.module("app", []);
    app.controller("CustomTriggerController", ["$scope", function ($scope) {
        $scope.PD = {};
    }]);
</script>

<div ng-app="app" ng-controller="CustomTriggerController">
    <form name="myForm">
        <p>
            Username: <input type="text" ng-model="PD.username" required
                             ng-model-options="{updateOn : 'blur', debounce : 400}" />
        </p>

        Address: <input type="text" ng-model="PD.address" required
                        ng-model-options="{updateOn : 'default blur', 
                                           debounce : {default: 250, blur: 100}}" />
    </form>
    <hr />
    <b>Username:</b> {{PD.username}} <br />
    <b>Address:</b> {{PD.address}}
</div>