Ember.js Bootstrap Active Tab

I am using Ember.js and Bootstrap to create an app. The app has 2 routes accounts.devices.devices1 and accounts.devices.devices1. I don't need the route accounts.devices but it can exist if necessary. But there should not be a link to it. I am running into issues with active. The link to Devices 1 is set as active when on the accounts.devices.devices1 page but I also want the link to accounts.devices. Basically whenever a child in the dropdown is active, I also want the parent to be active. This doesn't set the parent active only the child:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Devices<span class="caret"></span></a>
  <ul class="dropdown-menu">
    {{#link-to 'accounts.devices.devices1' tagName='li'}}<a href={{view.href}}>Devices 1</a>{{/link-to}}
    {{#link-to 'accounts.devices.devices2' tagName='li'}}<a href={{view.href}}>Devices 2</a>{{/link-to}}
  </ul>
</li>

This code sets the parent active but also creates a link to accounts.devices when the dropdown is clicked instead of opening the dropdown. Also, the links to Devices 1 and Devices 2 don't work.

{{#link-to 'accounts.devices' tagName='li' class='dropdown'}}
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Devices<span class="caret"></span></a>
  <ul class="dropdown-menu">
    {{#link-to 'accounts.devices.devices1' tagName='li'}}<a href={{view.href}}>Devices 1</a>{{/link-to}}
    {{#link-to 'accounts.devices.devices2' tagName='li'}}<a href={{view.href}}>Devices 2</a>{{/link-to}}
  </ul>
{{/link-to}}

How should this be done?