Angular ngClass does not change the value of the class

Question

I have the following html:

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

I want to change the class of the when the user clicks on the select so I have the ng-change to turn the value into true, when the page loads, I have:

ng-class="{'large svg icon guests {{focused}} ':rooms==2, 'large svg icon guest {{focused}}':rooms==1}"

and

class=large svg icon guests false

which I supposed is correct, when the user clicks the select the first line becomes

ng-class="{'large svg icon guests true ':rooms==2, 'large svg icon guest true':rooms==1}"

but the class is still large svg icon guests false

Any idea why the class does not change?

Answer 1

try this

<i  class="large svg icon {{focused}}" ng-class="{guests:(rooms==2), guest:(rooms==1)}"></i>

you are trying to interpolate inside a directive, i believe a better solution would be to separate the interpolation from the conditional as stated above. you can have all your stateic classes and your interpolation inside the usuall class tag and then use ng-class only for the conditional ones