How to add Css Class to item inside Ember's {{#each}} loop, according to index? - Ember.js

I have a Ember app with side-menu. The menu items in the html are based on Ember's {{each}} loop. When user select a menu-item I want to add this item active class.

How do I add css class to single item inside Ember's {{each}} According to condition from the controller.

Html/Hbs:

<ul>
   {{#each menuItem in sideMenuItems}}
      <li {{bind-attr class="isActive: active-class"}} {{ action 'selectMenuItem' _view.contentIndex }}>
         {{ menuItem.text }}
      </li>
   {{/each}}
</ul>

Controller:

Ember.ObjectController.extend(
{
   selectedMenuIndex: 0,
   isActive: function()
   {
      return (this.get('selectedMenuIndex') == ???);
   }.property('???'),

   actions:
   {
      selectMenuItem: function (itemIndex)
      {
         this.set('selectedMenuIndex', itemIndex);
      }
    }
}