angular add class to span element - angularjs

Question

I want to add class to span element using angular
<div class="input-group textbox-wrap fade-in two">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}"
required="required" data-ng-model="username" ng-focus="focusInput($event)" ng-blur="blurInput($event)" autofocus />
</div>
I am able to adding the class to parent div but i need to apply class for span element.
In the controller,
$scope.focusInput= function($event )
{
angular.element($event.target).parent().addClass('focused');
};

Answer 1

You could do it on HTML itself.
<div class="input-group textbox-wrap fade-in two">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}"
required="required" ng-class="'focused':focused"
data-ng-model="username" ng-focus="focused=true" ng-blur="focused=false" autofocus />
</div>

Answer 2

You could use ngClass directive on the span element, based on a variable you set on the focus input function.

Answer 3

You can do this:
<div class="input-group textbox-wrap fade-in two">
<span class="input-group-addon" ng-class="{'yourClass': inputFocused}"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}"
required="required" data-ng-model="username" ng-focus="focusInput()" ng-blur="blurInput($event)" autofocus />
</div>
$scope.focusInput= function($event )
{
$scope.inputFocused = true;
};