Angular ngFocus Demonstration

This is a followup proposal for ng-focus. In this method you specify a scope variable to bind to focus status. When you set that value from the controller, focus is set. When focus changes, the scope variable changes. The same idea would work for blur and select too. This is a followup to: http://jsfiddle.net/bseib/WUcQX/

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<div class="box">
    <div ng-app="myApp" ng-controller="MyCtrl">
		<h3>Demo of ng-focus, ng-blur, and ng-select</h3>
		<input type="text" x-ng-model="form2.color" x-ng-focus="form2.colorFocus" x-ng-blur="form2.colorBlur" x-ng-select="form2.colorSelect" x-ng-change="onChange2()">
   
		<span>type "blur" to blur</span>
		<br/>form2.color = <span x-ng-bind="form2.color"></span>
		<br/>form2.colorFocus = <span x-ng-bind="form2.colorFocus"></span>
		<br/>form2.colorBlur = <span x-ng-bind="form2.colorBlur"></span>
		<br/>form2.colorSelect = <span x-ng-bind="form2.colorSelect"></span>
		<br/>
     <input type="text"  x-ng-change="onChange3()">
		<button class="btn" x-ng-click="form2.colorFocus=true;">do focus</button>
		<button class="btn" x-ng-click="form2.colorSelect=true;">do select</button>
		
		<br/><br/>
		<h3>Demo with ng-repeat</h3>
		<div x-ng-repeat="f in folks">
			<span x-ng-bind="f.name"></span>
			<input type="text" x-ng-focus="f.focus" x-ng-blur="f.blur" x-ng-select="f.select" x-ng-model="f.val" x-ng-change="('blur'==f.val)&&(f.blur=true);">
			folks[{{$index}}].focus=<span x-ng-bind="f.focus"></span>
			.blur=<span x-ng-bind="f.blur"></span>
			.select=<span x-ng-bind="f.select"></span>
		</div>
		<button class="btn" x-ng-click="folks[0].focus = true;">focus item 0</button>
		<button class="btn" x-ng-click="folks[1].focus = true;">focus item 1</button>
		<button class="btn" x-ng-click="folks[2].focus = true;">focus item 2</button>
		<button class="btn" x-ng-click="folks[3].focus = true;">focus item 3</button>
		<br/>
		<button class="btn" x-ng-click="folks[0].select = true;">select item 0</button>
		<button class="btn" x-ng-click="folks[1].select = true;">select item 1</button>
		<button class="btn" x-ng-click="folks[2].select = true;">select item 2</button>
		<button class="btn" x-ng-click="folks[3].select = true;">select item 3</button>
		<br/>
   ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.box {
    margin-top: 10px;
    margin-left: 10px;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function ($scope) {

	$scope.folks = [
 		{id: 123, name: 'ellen'},
 		{id: 714, name: 'frank'},
 		{id: 531, name: 'grace'},
 		{id: 284, name: 'harry'},
 	];
 	
 	$scope.form2 = {color:''};
    $scope.onChange2 = function() {
		if ( "blur" === $scope.form2.color ) {
			$scope.form2.colorBlur = true;
		}
	};
  $scope.onChange3 = function() {
		
			$scope.form2.colorFocus = true;
		
	};
  

});

angular.module('ng').directive('ngFocus', function($parse, $timeout) {
	var NON_ASSIGNABLE_MODEL_EXPRESSION = 'Non-assignable model expression: ';
	return {
		restrict: "A",
		link: function(scope, element, attr) {
			var buildGetterSetter = function(name) {
				var me = {};
				me.get = $parse(name);
				me.set = me.get.assign;
				if (!me.set) {
					throw Error(NON_ASSIGNABLE_MODEL_EXPRESSION + name);
				}
				return me;
			};

			// *********** focus *********** 
			var focusStateName = attr.ngFocus;
			var focusState = buildGetterSetter(focusStateName);

			// inititialize the focus state
			// (oh, if there were only a way to test if an element presently has focus, we'd preset it here...)
			focusState.set(scope, false);

			// $watch the trigger variable in the controller for a transition
			scope.$watch(focusStateName, function(newValue, oldValue) {
				if ( newValue ) {
					$timeout(function() { // a timing workaround hack
						element[0].focus(); // without jQuery, need [0]
					});
				}
			});
			
			// wire up listeners for focus and blur events so that we can track the state
			element.bind('focus', function() {
				scope.$apply(function() {
					focusState.set(scope, true);
				});
			});
			element.bind('blur', function() {
				scope.$apply(function() {
					focusState.set(scope, false);
				});
			});
		}
	};
});

angular.module('ng').directive('ngBlur', function($parse, $timeout) {
	var NON_ASSIGNABLE_MODEL_EXPRESSION = 'Non-assignable model expression: ';
	return {
		restrict:...