Refresh a directive in Angular

Question

I'm rather new to Angular, so I'm not sure if "refreshing the directive" is worded correctly. I'm building a quiz in Angular and use djds4rce's angular-socialshare to display a twitter button.

edit: sorry for the lack of info earlier. Here's more code:

edit edit: Okay, this obviously has to do either with the angular-socialshare plugin OR the twitter button. When I do this to the twitter button:

<a twitter data-text="{{score}}"></a>

I see in my Developer tools in Chrome that it correctly shows the score of the user. However when I click the link, all of a sudden the text is back to "0".

HTML

I get a list from an api. Each element (I call it premier) of that list has both a name and a 'correct' attribute.

<button ng-click="validateClick(premier, $index)" 
class="btn btn-default btn-game" 
data-correct="@{{premier.correct}}" 
ng-class="{'disabled btn-danger': premier.isPremier, 'disabled btn-success': premier.isRandom}" 
ng-repeat="premier in premiers" 
ng-disabled="gameOver" 
ng-bind="premier.name">

And I display the score for the user:

<span class="score" ng-bind="score"> </span>/70

JAVASCRIPT

In my Angular controller I have a variable called score

premierApp.controller('premierController', function ($scope, $http) {

$scope.score = 0;

//so if this correct value = "premier", Game Over! if it = "random", then the user gets a point
$scope.validateClick = function (premier, index) {
    if (premier.correct == "premier") {
        premier.isPremier = true;
        $scope.gameOver = true;
        $scope.stopGame();
    } else {
        premier.isRandom = true;
        $scope.score++;
    }
}

and I'm using a directive to display a tweet button so the user can tweet his score:

directive:

premierApp.directive('tweetbutton', function() {
    return {
        templateUrl: 'html_templates/premiers_tweetbutton.html',
    };
});

and the templateurl is this:

<a twitter
    data-lang="en"
    data-size="medium"
    data-text="{{score}}">
</a>

Right now the text (data-text) of the twitter button remains "0" (the standard value when I declared the variable in my Controller).

How can I update the directive to display the new score that my app calculated?

Solution

you might need to do:

$scope.$apply() 

in your controller function but if I could see a plunkr or some more code that would be helpful

make a plunkr, lets see everything, I'd like to know what element your directive is attached to. directives will "refresh" automatically if the value of that $scope is changed. again, making a plunkr will help, I don't know how everything is looking for you.

UPDATE

http://plnkr.co/edit/Y6LSXhOV1r8c4HQeDq0L?p=preview

Try this:

Your directive:

premierApp.directive('tweetbutton', function($compile) {
   return {
       scope: { score: "@score" },
       templateUrl: 'premiers_tweetbutton.html'
   };
});

And in the view

<div tweetbutton score="{{score}}"></div>