Change class to ng-focus in angularJS

Question

I have the following html:

<div class="icon fluid select" ng-init="focused = false">
   <i  ng-class="{'large svg guests icon':rooms==2, 'large svg guest icon':rooms==1,'active':focused==true}"></i>
    <label ng-click="closeCalendar();">
   <select ng-model="rooms" name="rooms"   class="fluid" name="rooms" focus-parent selecter required>
     <option value="1" ng-focus="focused = true">Einzelzimmer</option>
     <option value="2" ng-focus="focused = true">Doppelzimmer</option>
    </select>
 </label>

I initialized a model focused with an initial value of false, I want to change the value of this when the option of the selection block is focused or when the selection is focused, I tried to do it higher, but it did not work, how can I solve this possibly?

Answer 1

<option>elements cannot receive focus, only an element <select>can. Therefore, you need to put listeners on <select>(do not forget to add the listener blurto set focusedback to false):

<select ng-model="rooms" 
        ng-focus="focused=true" 
        ng-blur="focused=false">

See also this short demo .

Answer 2

, , , angular. , , , :

<i class="icon"  ng-class="{'gbp':rooms=='2', 'usd':rooms=='1'}"></i>
<select ng-model="rooms" name="rooms" class="fluid">
 <option value="1">Dollars</option>
 <option value="2">Pounds</option>
</select>

, , , , . ng-model , , "usd" "gbp" ( , ). CSS, .

: http://plnkr.co/edit/6cgHFirI2jxXIAGJ83YW?p=preview

---

div , ng-focus ng-blur , :

<select ng-model="rooms" name="rooms" class="fluid"
        ng-focus="highlight=true" ng-blur="highlight=false">

ng-focus ng-blur , ng-class. :

<div ng-class="{'highlight':highlight==true,'normal':highlight==false}">

plunker : http://plnkr.co/edit/6cgHFirI2jxXIAGJ83YW?p=preview

!