How to make repeater item works outside of ng-repeat

Question

I've started to experiment a little bit with AngularJS. Now I think I have a newbie problem with ng-class. I'm trying to change the color of an icon of awesome font.

<div ng-controller="MyCtrl">
<i ng-class="{'test': item.active}" class="fa fa-bullhorn"></i>

I have a checkbox and have a binding via ng-model to the parameter

<div class="checkboxes">
  <form>
    <span ng-repeat="item in items">
      <input type="checkbox" ng-model="item.active"> {{item.name}}<br>
    </span>
  </form>
</div>
</div>

When I click the checkbox, the scope is like:

[{"category":"category1","name":"Item1","active":true}]

But the class of the i-element is only "fa fa-bullhorn".

The color is at the start black, the css class test looks like

.test{
color: red;
}

Can somebody help me?

Answer 1

<i ng-class="{'test': item.active}" class="fa fa-bullhorn"></i>

item.active should be inside repeater like this

<span ng-repeat="item in items">
   <input type="checkbox" ng-model="item.active"> {{item.name}} {{item.active}}
      <i ng-class="{'test': item.active}" class="fa fa-bullhorn"></i><br>
</span>

Look the demo http://plnkr.co/edit/RcposHlL8uSLZs39IvyK