ngClick toggle class влияет на все элементы

Question

У меня есть группа элементов, которые при нажатии на них должны переключать класс. Проблема заключается в том, что при нажатии на один из элементов все элементы получают перегруженный класс.

<div layout="row" layout-align="space-between center" class="editor-row"> 

<div flex="initial"> 
    <div class="gradient-btn" ng-click="toggle.state = !toggle.state" ng-class="{'focus' : toggle.state}"> 
     <md-checkbox ng-model="data.fontStyle.bold" aria-label="Bold" entersubmit="ok()">Bold</md-checkbox> 
    </div> 
</div> 

<div flex="initial"> 
    <div class="gradient-btn" ng-click="toggle.state = !toggle.state" ng-class="{'focus' : toggle.state}"> 
     <md-checkbox ng-model="data.fontStyle.italic" aria-label="Italic" entersubmit="ok()">Italic</md-checkbox> 
    </div> 
</div> 

<div flex="initial"> 
    <div class="gradient-btn" ng-click="toggle.state = !toggle.state" ng-class="{'focus' : toggle.state}"> 
     <md-checkbox ng-model="data.fontStyle.shadow" aria-label="Shadow" entersubmit="ok()">Shadow</md-checkbox> 
    </div> 
</div> 

Answer 1

Они все в той же области, следовательно, toggle.state переменная является тем же самым.

изменение: toggleBold.state, toggleItalic.state, ...

Answer 2

Все элементы относятся к одной и той же toggle.state

При нажатии на первой, toggle.state переменной изменения и все элементы, имеющие ng-class="{'focus' : toggle.state}", подвергаются воздействию.