Bootstrap components (model, tab, dropdown) are not working when switching the routes in EmberJs

Bootstrap components (model, tab, dropdown) are not working when switching the routes in EmberJs

I have two in my application.hbs, one for login and other for all other pages.

    <div class="main"><div>

    <div class="login"></div>
 

Initially the bootstrap components are working fine, If i transition to login and come back to other routes then the components in other routes are not working.

The tabs worked before are not clickable. The dropdown menu are not clickable. The model is not showing up on clicking on button.

If i use same outlet for both routes then it works fine.