preserve bootstrap clicked tab on page refresh even if markup loaded by angular

Question

Currently, my tabs are loaded using Angular. Whenever someone clicks on a tab I save the id to localStorage.

I want to click the same tab using jQuery when page refreshes, but the DOM element for the tab doesn't exist yet because Angular didn't load it yet. How can I run the click action after Angular is loaded?

Below is a snippet of my tab markup markup below is loaded by Angular

<tabset>
  <tab id="tab1">
     <tab-heading></tab-heading>
  </tab>
  <tab id="tab2">
     <tab-heading></tab-heading>
  </tab>
</tabset>

I want to fire something like below after knowing the above markup is in the DOM

$(document).ready(function(){
  $('#tab2').click();
});

Answer 1

Try to not use jQuery at all. In your case i suggest to use angular element in your controller.

angular.element('#tab2').trigger('click');