AngularJS re-initialise JS after statechange

Question

I have social buttons from http://sharethis.com that I want to put on a profile page on my app. I'm using the ui-router for state management and page transitions, etc.

I've put the code I got from sharethis onto my index.html:

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "66053d76-64c6-4378-8971-aac043dbbc5d", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

and the markup on my profiles page:

<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_googleplus_hcount' displayText='Google +'></span>

What's happening is the social buttons are only loading when you refresh on the profile page (which is expected behaviour I guess). If the app bootstraps from say the homepage and then you transition to the profile page they aren't being loaded.

Are there any tricks that I can use to re-initialise or reload these javascript files?

Answer 1

I've spend some time investigating sharethis source code and found this function which creates buttons, on page controller add this function call and this will add the buttons.

stButtons.makeButtons();