Addthis button works with AngularJs

Question

I want to use addthis in my angularjs driven web page.Follow the answer at AngularJs and AddThis social plugin I write my code like this:

GFDirectives.directive('addthisToolbox', function() {
   return {
    restrict: 'A',
    transclude: true,
    replace: true,
    template: '<div ng-transclude></div>',
    link: function ($scope, element, attrs) {
        addthis.init();
        // Dynamically init for performance reason
        // Safe for multiple calls, only first call will be processed (loaded css/images, popup injected)
        // http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#configuration-url
       // http://support.addthis.com/customer/portal/articles/381221-optimizing-addthis-performance            addthis.init();
        // Ajax load (bind events)
        // http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#rendering-js-toolbox
        // http://support.addthis.com/customer/portal/questions/548551-help-on-call-back-using-ajax-i-lose-share-buttons
        addthis.toolbox($(element).get());

       }
    }
});

The code on the particle is like:

                <div class="row">
                    <div class="col-sm-12">
                        <!-- Go to www.addthis.com/dashboard to customize your tools -->
                        <div class="addthis_toolbox addthis_custom_follow ">Follow Us:</div>
                        <script type="text/javascript">var addthis_config = { "data_track_clickback": false, "data_track_addressbar":false };</script>

                    </div>
                </div>

I Load the addthis js on the index.html like:

    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5437a02d238db4c8" async="async"></script>

But still i have to manual refresh the page to get the icons display on my website.Whats wrong and what should i do to fix it?