Ember2.8:Toggling the value of a component's boolean variable from the route's controller

I have a game-card component which is set up like this:

game-card.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['flip-container'],
  isFlipped: false
});

game-card.hbs

<div class="flipper">
  <div class="front"></div>
  <div class="back">
    <img  src= />
  </div>
</div>

This component interacts with the route's controller. This is the controller's code:

play.js (/play route)

import Ember from 'ember';

export default Ember.Controller.extend({
  clickedCard: null,
  init() {
    this.set('clickedCard', '');
  },

  actions: {
    handleCardClick(someUrl) {
      if(this.clickedCard === '') {
        //we store first clicked card
        this.set('clickedCard', someUrl);
      } else if(someUrl === this.clickedCard){
        //we assume the card clicked was a match. winning pair. we reset the variable;
        console.log('we have a matching pair');
        //logic to maintain the two cards with the image flipped
        this.set('clickedCard', '');
      } else if(this.clickedCard !== '' && someUrl !== this.clickedCard){
        console.log('nope. restart');
        this.set('clickedCard', '');
        //reset the clickedCard variable;
        //we assume the second clicked card wasn't a match. so we reset
      }
    }
  }
});

The controller is in charge of handling the logic of seeing if two consecutively clicked cards have the same image url. What I want to do now is somehow tell the individual game-card's isFlipped variable to change depending on logic performed by the controller.

So for example, assuming that the logic went through the second else if statement, i'd like to do something of the following:

1. We have a winning pair (i.e. two game-cards with the same image URL)
2. The controller now tells each of those two game-cards isFlipped variables to change to 'true'.