AngularJS Example:

by bodine30

HTML

<div ng-app="myApp">
    <div ng-controller="empiCtrl">
        <label>{{selectedItem.name || "Name:"}}</label>
        <input
        type="text"
        placeholder="Enter a name here"
        ng-model="prop"
        data-delayed-change="selectedItem.style.backgroundColor"
        >
        <div ng-repeat="el in Collection" ng-click="selectIndex($index)" ng-style="el.style">{{el.name}}</div>
        <hr>
        <h1>selectedItem: {{selectedItem.style.backgroundColor}}!</h1>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script> <style>

JavaScript

var myApp = angular.module('myApp', []);
function empiCtrl($scope) {
    var scope = $scope;
    $scope.Collection = [
        {name:"item 1", style:{backgroundColor:"red"}},
        {name:"item 2", style:{backgroundColor:"green"}},
        {name:"item 3", style:{backgroundColor:"blue"}},
        {name:"item 4", style:{backgroundColor:"yellow"}},
        {name:"item 5", style:{backgroundColor:"orange"}}
    ];
    $scope.selectIndex = function(index) {
        $scope.selectedItem = $scope.Collection[index];
    };
    $scope.activateSelectedItemWatch = function (event, isolatedScope) {
        scope.$apply(function(){
            scope.watchStatus = "on";
        });
    };
    $scope.deactivateSelectedItemWatch = function (event, isolatedScope) {
        if(typeof scope.selectedItem !== "undefined") {
            scope.$apply(function(){
                scope.selectedItem.style.backgroundColor = isolatedScope.prop;
            });
        }
    };
}
angular.module('myApp').directive('delayedChange', function($timeout){
    return {
        restrict: "A",
        scope: {delayedChange: "="},
        link: function(scope, iElement, iAttrs) {
            
            var unwatch, timerPromise = null;
            scope.$watch('delayedChange', function(newValue, oldValue, arg) {
                scope.prop = newValue;
            });
            function delayedComparison() {
                if(!angular.equals(scope.delayedChange, scope.prop)) {
                    console.log(scope.delayedChange, scope.prop);
                    scope.$apply(function(){
                        scope.delayedChange = scope.prop;
                    });
                }
            };
            function boundFocusHandler(e) {
                delayedComparison();
                unwatch = scope.$watch(iAttrs.ngModel, watchListener);
            };
            function boundBlurHandler(e) {
                delayedComparison();                
                if(timerPromise) {
        ...