title: How to re-render directive after a variable is changed?
body: <p>I am using a directive for star rating. But the template the is loaded before data is loaded from HTTP. So i want to reload directive template after HTTP request is successful.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;&lt;body&gt;
  
  
  &lt;div ng-app="myapp" ng-controller="movieCtrl"&gt;
  
  &lt;div star-rating rating="starRating" read-only="false" max-rating="10" click="click(param)" mouse-hover="mouseHover(param)"
          mouse-leave="mouseLeave(param)"&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var app = angular.module('myapp', []);
  app.controller("movieCtrl", function($scope, $http) {
  
    $scope.starRating = 0;
    $scope.hoverRating = 0;
  
  
    $scope.mouseHover = function(param) {
      $scope.hoverRating1 = param;
    };
  
    $scope.mouseLeave = function(param) {
  
      $scope.hoverRating1 = param + '*';
    };
    //problem here
    //actual data coming via http
    //when value is changed i want to re-render below directive template
    setTimeout(function() {
      $scope.starRating = 5
    }, 1000);
  });
  app.directive('starRating', function() {
    return {
      scope: {
        rating: '=',
        maxRating: '@',
        readOnly: '@',
        click: "&amp;",
        mouseHover: "&amp;",
        mouseLeave: "&amp;"
      },
      restrict: 'EA',
      template: "&lt;div style='display: inline-block; margin: 0px; padding: 0px; cursor:pointer;' ng-repeat='idx in maxRatings track by $index'&gt; \
                      &lt;img ng-src='{{((hoverValue + _rating) &lt;= $index) &amp;&amp; \"http://www.codeproject.com/script/ratings/images/star-empty-lg.png\" || \"http://www.codeproject.com/script/ratings/images/star-fill-lg.png\"}}' \
                      ng-Click='isolatedClick($index + 1)' \
                      ng-mouseenter='isolatedMouseHover($index + 1)' \
                      ng-mouseleave='isolatedMouseLeave($index + 1)'&gt;&lt;/img&gt; \
              &lt;/div&gt;",
      compile: function(element, attrs) {
        if (!attrs.maxRating || (Number(attrs.maxRating) &lt;= 0)) {
          attrs.maxRating = '5';
        };
      },
      controller: function($scope, $element, $attrs) {
        $scope.maxRatings = [];
  
        for (var i = 1; i &lt;= $scope.maxRating; i++) {
          $scope.maxRatings.push({});
        };
  
        $scope._rating = $scope.rating;
  
        $scope.isolatedClick = function(param) {
          if ($scope.readOnly == 'true') return;
  
          $scope.rating = $scope._rating = param;
          $scope.hoverValue = 0;
          $scope.click({
            param: param
          });
        };
  
        $scope.isolatedMouseHover = function(param) {
          if ($scope.readOnly == 'true') return;
  
          $scope._rating = 0;
          $scope.hoverValue = param;
          $scope.mouseHover({
            param: param
          });
        };
  
        $scope.isolatedMouseLeave = function(param) {
          if ($scope.readOnly == 'true') return;
  
          $scope._rating = $scope.rating;
          $scope.hoverValue = 0;
          $scope.mouseLeave({
            param: param
          });
        };
      }
    };
  });
  </code></pre>
  
  <p>See <a href="http://codepen.io/akmittal/pen/vLXYEv" rel="noreferrer">Codepen</a> for more info.</p>