title: How to refresh an angular tag
body: <p>I was brought in to fix a website that was on fire a couple months back. I've got most things under control and I'm down to fixing various wish-list items. One of them involved some angular code that I just can't seem to get to do what I want. On some pages there are videos followed by a short quiz. I need to update the user's scores after each event. So far, this proved to be easy enough for the total score which looked like this:</p>
  
  <pre><code> &lt;a id="updateafterscore" href="~/user/leaderboard/" class="fill-div"&gt;
                                  {{ profile.currentScore }}
                              &lt;/a&gt;
  </code></pre>
  
  <p>And that got updated with this:</p>
  
  <pre><code>document.getElementById('updateafterscore').innerHTML = data.Data.CurrentScore;
  </code></pre>
  
  <p>So far, so good. However other elements on the page have, thus far, proved impossible to update. Here's what's on the page:</p>
  
  <p></p>
  
  <p>I added the "id="refreshvideo" myself so I could try to alter the tag. Finally, here's the angular module for simple-circle (I've left out the actual drawing code since it's not really relevant):</p>
  
  <pre><code>angular.module('thrive.shared').directive('simpleCircle', function() {
  
  return{
      replace: true,
      template: '&lt;canvas width="60" height="60" style="margin: -10px 0 0 -15px;"&gt;&lt;/canvas&gt;',
      restrict: 'E',
      scope: {
          value: '@',
          color: '@',
          bgColor: '@',
          forecolor: '@',
          radius: '@'
      },
      link: function (scope, elem, attrs) {
  
          var multiplyLength = 1;
          var canvasElem = elem[0];
          var inMotion = false;
  
          if (scope.value &lt;= 2) {
              multiplyLength = 5;
          }
  
          scope.$watch('value', function() {
              drawCircle(canvasElem, scope.color, scope.value * multiplyLength, scope.value, scope.name);
          });
  
  
          function drawCircle(canvas, color, calculatedPoints, displayPoints, name) {
  </code></pre>
  
  <p>So, to the question: how the heck do I update the number that's displayed? I tried various things:</p>
  
  <pre><code>document.getElementById('refreshvideo').setAttribute('value', data.Data.VideoWatchedCount);
  document.getElementById('refreshvideo').setAttribute('data-value', data.Data.VideoWatchedCount);
  $scope.profile.videosWatched = data.Data.VideoWatchedCount;
  </code></pre>
  
  <p>None of these things worked. I inspected the <em>canvas</em> element in the source in the browser and I could see the <em>value</em> and <em>data-value</em> tags change to whatever I set them, but the image remained unchanged. Am I setting the wrong thing? (Perhaps whatever <em>$watch</em> is watching) Do I have to force some kind of re-paint of a <em>canvas</em> element?</p>