Angular, CSS style, dynamiczne pseudoklasy

Hej,
Szukam rozwiązania takiego problemu:
Mam box z pseudklasami ::before i ::after.
Te pseudoklasy określają "strzałkę, która jest na boxie (Podobnie jak popover )
Box jest rozciągnięty na całą szerokość kontenera, w którym jest kilka inputów ułożonych w horyzontalnie. Teraz, w zależności w który input kliknie użytkownik, tam powinna być strzałka (czyli powinny być zmodyfikowane parametry pseudoklas)
Jezcze dodam, że to ma być dyrektywa, ale to mniej istotne.

Ponieważ pseudoklasy nie są częścią DOM, nie mogę ich modyfikować przez jquery .css().
Z tego powodu myślałam, żeby nadpisywać styl przy ładowaniu templatu.
Załózmy coś takiego w szablonie dyrektywy:

<div>
<style type="text/css">
        .main .information-box.row::before {
            left: {{ nowa_wartość }}%;
        }

        .main .information-box.row::after {
            left: {{ nowa_wartość }}%;
        }
    </style>
    <div class="information-box row">...</div>
</div>

Tylko jak przekazać tę nową, dynamicznie wyliczoną wartość położenia strzałki do <style> ?
Może da się to rozwiązać w jakiś inny sposób?