AngularJS, how do I make the UI dependent on which field has focus?

Question

I have an AngularJS page with several form inputs.

When the some of the inputs have focus, I want to change other, arbitrary, aspects of the page.

For example, w

Answer 1

How about make a directive? You could set a variable whenever the user leaves/enters the input, and detect that: http://jsfiddle.net/TZnj2/

Be sure to read the directive guide if you're confused as to what's happening: http://docs.angularjs.org/guide/directive

Also I use scope.$apply in that directive, here's an explanation of what that does: http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply

Answer 2

ngFocus and ngBlur are built-in directives:

<input ng-focus="hasFocus = true" ng-blur="hasFocus = false" type="text">
<p ng-show="hasFocus">The field has focus!!</p>

Try demo on jsfiddle