title: ng-repeat with *conditional* ng-class by $index
body: <p>I'm applying a button to a list-group-item using ng-repeat where the button has a class btn-primary when not selected and a minus glyphico and a class btn-success when selected and an ok glyphicon. I'm trying to apply this conditionally using ng-class which is fine, but how to do it by $index selection I don't know. I've looked at examples using the ternary and logic ( &amp;&amp; ) operators but can't seem to get the syntax right. To clarify I'd like one button when clicked to change it's icon and it's colour. As you can see I am successfully using the $index to select a group-item and change its colour no problem.</p>
  
  <p>Here's a plunk</p>
  
  <p><a href="http://plnkr.co/edit/dPoHtL7MgFNX4FhDXoBH?p=preview" rel="nofollow">http://plnkr.co/edit/dPoHtL7MgFNX4FhDXoBH?p=preview</a></p>
  
  <pre><code>  &lt;button class="btn btn-sm pull-right move-button" ng-class="{'btn-success': Activatorator, 'btn-primary': !Activatorator}" ng-click="markActive($event, this.$index)"&gt;
      &lt;span ng-class="{'glyphicon glyphicon-ok': Activatorator, 'glyphicon glyphicon-minus': !Activatorator}"&gt;&lt;/span&gt;
    &lt;/button&gt;
  </code></pre>
  
  <p>***** Solution</p>
  
  <p>I fixed this using the selected ng-repeat item as suggested. Since the regular 'class' on an html element sort of acts like the 'else' clause in an if/else I used that to evaluate the default state of the button, btn-primary with glyphicon-minus and ng-class to change the state on click by id.</p>
  
  <p>Working plunker
  <a href="http://plnkr.co/edit/0j9BxFQdD2lIx7lgthDR?p=preview" rel="nofollow">http://plnkr.co/edit/0j9BxFQdD2lIx7lgthDR?p=preview</a></p>