angular add class to span element

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;
  };