Ember js controlling class bindings in repeating component

I have a component which is repeating inside an each loop. The component simply displays the title of a post (There could potentially be hundreds).

The code below is successfully adding the class 'active' to a title element which is clicked.

How can I remove class 'active' from all previous titles when a new one is clicked (So that only one title ever has the class active)?

I originally tried doing this on the controller, but I couldn't work out how to set the isActive property on one instance in the each loop.

Template.hbs:

{#each posts as |post index item|}}
  {{title-component data=post index=index}}
{{/each}}

title-component.hbs:

<a {{bind-attr class="isActive:active"}}{{action 'setActive' index}}>{{data.title}}</a>

title-component.js

actions: {
  setActive: function(index) {
    this.set('isActive', true);
  },
},