How to implement Twitter button the Angular way

Question

I'm having issues implementing a humble tweet button on my site using Angular. I've done some research and found some solutions for an AJAX site using jQuery but as far as I can tell using the solution (below) would involve running script outside of a controller, and would therefore be non-Angular and A Bad Thing.

Has anyone solved this problem in an Angular way or have any tips on how to?

Thanks.

Solution for AJAX:

//adding button to dom
$('#tweetbutton').append('<a class="twitter-share-button" href="http://twitter.com/share" data-url="http://www.google.nl>Tweet</a>');
//loading widgets
$.getScript('//platform.twitter.com/widgets.js', function(){
//calling method load
twttr.widgets.load();

Taken from: Cannot update tweet button with Ajax

Answer 1

Here's a gist that might help you out: https://gist.github.com/Shoen/6350967

directive.js

directives.directive('twitter', [
    function() {
        return {
            link: function(scope, element, attr) {
                setTimeout(function() {
                        twttr.widgets.createShareButton(
                            attr.url,
                            element[0],
                            function(el) {}, {
                                count: 'none',
                                text: attr.text
                            }
                        );
                });
            }
        }
    }
]);

index.html

<script src="http://platform.twitter.com/widgets.js"></script>

<a twitter data-text="Your text: {{file.name}}" data-url="http://127.0.0.1:3000/{{file.link}}"></a>