Show informative message when the modal is focused - angularjs

Question

<input type="text" ng-model="user.username" name="username" required>
<div class="sidetip">
<div ng-show="signup.username.$pristine">
<span>Choose a Username.</span>
</div>
I only want to show the "Choose a Username", If the form is pristine AND the input "username" is focused. How can I accomplish that?
The ng-focus seems like I only can apply on the input, and not what I am asking for "When the Input username is active, display this is if form username also is pristine"...

Answer 1

Something like this would work?
Here is a demo
<form name='signup' ng-submit="submit()" ng-controller="Ctrl">
Username:
<input type="text" ng-model="user.username" name="username" ng-focus="usernameIsFocus=true" ng-blur="usernameIsFocus=false" required />
<div class="sidetip">
<div ng-show="signup.username.$pristine && usernameIsFocus">
<span>Choose a Username. Click outside text field to hide this tip.</span>
</div>
</div>
</form>
just a side note
signup.username.$pristine
is not the same as
user.username == ''
so if you enter text in input username and then delete it, the first will be false and the second will be true

Answer 2

Angular 1.2 has ngBlur and ngFocus directives, in older versions you can create a directive which changes value given variable on focus is-focus="usernameIsFocus"
<input type="text" ng-model="user.username" name="username" required is-focus="usernameIsFocus">
<div class="sidetip">
<div ng-show="usernameIsFocus">
<span>Choose a Username.</span>
</div>
</div>
directive
app.directive('isFocus', function(){
return {
scope: {
isFocus: '='
},
link: function(scope, element, attrs){
element.on('focus', function() {
scope.$apply(function () {
scope.isFocus = true;
});
});
element.on('blur', function() {
scope.$apply(function () {
scope.isFocus = false;
});
});
}
};
});
Here a working example:
http://plnkr.co/edit/Xan0rO8FKeOAlFC2MwoO?p=preview