title: In Angular, how to force template to recompile when I receive some new data?
body: <p>Suppose I have a directive in which a template contains some data that provide another JS to draw a piechart:</p>
  
  <pre><code>mymodule.directive('myGauge', ['$http', function() {
      return {
          restrict: 'E',
          template: '&lt;div class="quota-dynamic"&gt;&lt;h3&gt;Limit Summary&lt;/h3&gt;&lt;div class="d3_quota_bar"&gt;&lt;div class="pie_chart" data-used="{$ dataUsed $}"&gt;&lt;/div&gt;&lt;/div&gt;'
  
      }
  }]);
  </code></pre>
  
  <p>whereas "pie_chart" is used in another JS and it relies data-used value to draw the piechart.</p>
  
  <p>I have another controller which receive the data:</p>
  
  <pre><code>mymodule.controller('MyCtrl', ['$scope', '$http', function($scope, $http) {
      $scope.$parent.$watch("toggled", function(toggled) {
          var tenant_id = 1234;
          if (!$scope.$parent.isCollapsed()) {
              $http({
                  method: 'get',
                  url: 'http://localhost:8080/admin/projects/' + tenant_id + '/test/'
              }).success(function (data, status) {
                  $scope.dataUsed = data.totalInstancesUsed / data.maxTotalInstances * 100;
              }).error(function () {
              });
          }
      });
  }]);
  </code></pre>
  
  <p>When I receive the data, it is too late for the piechart as it is drawn already. I would like to know if there is a way to force the directive to update the template with new data again?</p>
  
  <p>Thanks.</p>