Bootstrap re-toggling button after Ember has already toggled it on re-render

I have a button as defined below.

<button type="button"
  class="btn btn-primary-outline {{if shouldBeActive "active"}}"
  data-toggle="button"
  {{action "makeActive"}}>MyButton</button>

The makeActive action toggles the shouldBeActive property, which causes the button to gain or lose the .active class when ember re-renders the template.

This is all great... except that the bootstrap.js click handler to toggle the button's .active class is then fired AFTER the Ember has updated the DOM, causing the button to be toggled into the incorrect toggled state.

Is there an eloquent way to fix this? My only thought is that I could do something stupid like...

<button type="button"
  class="btn btn-primary-outline {{if (xor shouldBeActive isFirstRender) "active"}}"
  data-toggle="button"
  {{action "makeActive"}}>MyButton</button>

... to effectively set the active state to the opposite of what is intended and let bootstrap toggle it to what is appropriate.