ember bind-attr class is not being set by controller

I'm creating a master-detail table. Before an item has been chosen, the details should not be visible, only becoming visible on clicking of an item.

The reason I'm using a class is because the table is normally 100% width, and it changes size when the detail pops up. This is not implemented yet. Right now, I just want the 'with-details' class to be inserted into the div when I click in the < li >

Here is a rough twiddle: http://ift.tt/1O7JoNB

In my template, the < li > has an action:

<li >

which fires the showDetails action in my controller (I know it's firing because of the :) in console):

  withDetails: false,
  actions: {
        showDetails: function() {
            console.log(":)");
            this.set('withDetails', true);
        }
    }

which should add the with-detail class to my details div:

<div class='game-details'  >

which should match my CSS:

.game-details {
    display: none;
}
.game-details.with-details {
    display: block;
}

It should be that easy. What am I missing?