title: Directive template value not updating
body: <p>I'm setting up a directive like so (timeout function just as a demo):</p>
  
  <pre><code>app.directive('timeRange', function () {
      return {
          restrict: 'A',
          scope: {
              sliderId: "@sliderId",
          },
          template:   '&lt;div id="{{sliderId}}"&gt;&lt;/div&gt;'+
                      '&lt;p&gt;From: &lt;span&gt;{{fromVal}}&lt;/span&gt;'+
                          '&lt;span style="float:right;"&gt;{{toVal}}&lt;/span&gt;&lt;span style="float:right;"&gt;To: &lt;/span&gt;'+
                      '&lt;/p&gt;',
          link: function (scope, elem, attrs) {
  
              scope.sliderId = 'NewId';
              scope.fromVal = '06:00';
              scope.toVal = '17:00';
  
              setTimeout(function(){
                  scope.fromVal = 'Hello';
                  log("Changed");
              }, 2000);
          },
      };
  });
  </code></pre>
  
  <p>When the timeout function runs, the HTML doesn't update, the value stays at <code>06:00</code>. How do I get the template to update when the variable does? Do I need to somehow link it in the <code>scope</code> section where I link the attribute?</p>