title: Refresh a directive in Angular
body: <p>I'm rather new to Angular, so I'm not sure if &quot;refreshing the directive&quot; is worded correctly. I'm building a quiz in Angular and use <a href="https://github.com/djds4rce/angular-socialshare" rel="nofollow noreferrer">djds4rce's angular-socialshare</a> to display a twitter button.</p>
  <p>edit: sorry for the lack of info earlier. Here's more code:</p>
  <p>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:</p>
  <pre><code>&lt;a twitter data-text=&quot;{{score}}&quot;&gt;&lt;/a&gt;
  </code></pre>
  <p>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 &quot;0&quot;.</p>
  <p><strong>HTML</strong></p>
  <p>I get a list from an api. Each element (I call it premier) of that list has both a name and a 'correct' attribute.</p>
  <pre><code>&lt;button ng-click=&quot;validateClick(premier, $index)&quot; 
  class=&quot;btn btn-default btn-game&quot; 
  data-correct=&quot;@{{premier.correct}}&quot; 
  ng-class=&quot;{'disabled btn-danger': premier.isPremier, 'disabled btn-success': premier.isRandom}&quot; 
  ng-repeat=&quot;premier in premiers&quot; 
  ng-disabled=&quot;gameOver&quot; 
  ng-bind=&quot;premier.name&quot;&gt;
  </code></pre>
  
  <p>And I display the score for the user:</p>
  <pre><code>&lt;span class=&quot;score&quot; ng-bind=&quot;score&quot;&gt; &lt;/span&gt;/70
  </code></pre>
  <p><strong>JAVASCRIPT</strong></p>
  <p>In my Angular controller I have a variable called score</p>
  <pre><code>premierApp.controller('premierController', function ($scope, $http) {
  
  $scope.score = 0;
  
  //so if this correct value = &quot;premier&quot;, Game Over! if it = &quot;random&quot;, then the user gets a point
  $scope.validateClick = function (premier, index) {
      if (premier.correct == &quot;premier&quot;) {
          premier.isPremier = true;
          $scope.gameOver = true;
          $scope.stopGame();
      } else {
          premier.isRandom = true;
          $scope.score++;
      }
  }
  </code></pre>
  <p>and I'm using a directive to display a tweet button so the user can tweet his score:</p>
  <p>directive:</p>
  <pre><code>premierApp.directive('tweetbutton', function() {
      return {
          templateUrl: 'html_templates/premiers_tweetbutton.html',
      };
  });
  </code></pre>
  <p>and the templateurl is this:</p>
  <pre><code>&lt;a twitter
      data-lang=&quot;en&quot;
      data-size=&quot;medium&quot;
      data-text=&quot;{{score}}&quot;&gt;
  &lt;/a&gt;
  </code></pre>
  <p>Right now the text (data-text) of the twitter button remains &quot;0&quot; (the standard value when I declared the variable in my Controller).</p>
  <p><strong>How can I update the directive to display the new score that my app calculated?</strong></p>