AngularJS Example:

by bodine30

HTML

<div ng-app="myApp">
    <div ng-controller="empiCtrl" data-watch-status="{{watchStatus}}" data-change-status="{{changeStatus}}">
        <label>{{selectedItem.name || "Name:"}}</label>
        <input type="text" placeholder="Enter a name here" ng-model="yourName" ng-focus="activateSelectedItemWatch" ng-blur="deactivateSelectedItemWatch" 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>
[data-watch-status]::after {content:"input watch status: "attr(data-watch-status); display:block; padding:1em; background:#eee;}
[data-change-status]::before {content:"selectedItem change status: "attr(data-change-status);display:block;padding:1em; background:#eee;}

JavaScript

var myApp = angular.module('myApp', []);
function empiCtrl($scope) {
    debugger;
    var scope = $scope;
    $scope.foo = "bar";
    $scope.watchStatus = "initial";
    $scope.changeStatus = "initial";
    $scope.Collection = [
        {name:"item 1", empi:"", style:{backgroundColor:"red"}},
        {name:"item 2", empi:"324751", style:{backgroundColor:"green"}},
        {name:"item 3", empi:"", style:{backgroundColor:"blue"}},
        {name:"item 4", empi:"321647", style:{backgroundColor:"yellow"}},
        {name:"item 5", empi:"", style:{backgroundColor:"orange"}}
    ];
    $scope.selectIndex = function(index) {
        console.log("selectIndex ", index);
        $scope.selectedItem = $scope.Collection[index];
    };
    $scope.activateSelectedItemWatch = function (event, isolatedScope) {
        console.log("focusHandler ", arguments, scope);
        scope.$apply(function(){
            scope.watchStatus = "on";
        });
    };
    $scope.deactivateSelectedItemWatch = function (event, isolatedScope) {
        console.log("blurHandler ", arguments, scope);
        if(typeof scope.selectedItem !== "undefined") {
            scope.$apply(function(){
                scope.watchStatus = "off";
                scope.selectedItem.style.backgroundColor = isolatedScope.yourName;
            });
        }
    };
}
angular.module('myApp').directive('delayedChange', function($timeout){
    var blah = "blah";
    return {
        restrict: "A",
        scope: {ngFocus: "&", ngBlur: "&", delayedChange: "="},
        link: function(scope, iElement, iAttrs) {
            console.log(arguments);
            var unwatch, timerPromise = null;
            scope.yourName = scope.yourName || "";
            function delayedFn() {
                console.log("delayedFn is checking to see if anything has changed - ");
                //if(scope.yourName !== scope.s
                console.log(scope.delayedChange + " === " + scope[iAttrs.ngModel]);
            };
           ...