title: Refresh html for directive accord model changes
body: <p>I need generate ratings. Rating it is integer value beetwen 0 - 15.
  Rating have levels. (5 stars: bronze, silver, gold)</p>
  
  <p>So i need such html</p>
  
  <pre><code>&lt;span class="tb-ratings CLASS" ng-bind-html-unsafe="stars"&gt;
      &lt;i&gt;&lt;/i&gt;
      &lt;i&gt;&lt;/i&gt;
      &lt;i&gt;&lt;/i&gt;
      &lt;i&gt;&lt;/i&gt;
      ...
  &lt;/span&gt;
  </code></pre>
  
  <p>I had add directive </p>
  
  <p>Now i have problems:</p>
  
  <ul>
  <li>"i" tags count is not refreshing on rating changes via input (no add, no remove) - see example on <a href="http://jsfiddle.net/AdKd8/1/" rel="nofollow">http://jsfiddle.net/AdKd8/1/</a></li>
  <li>need raw html, no unsafe (ng-bind-html-unsafe not works in example)</li>
  </ul>
  
  <p>App code:
  <a href="http://jsfiddle.net/AdKd8/1/" rel="nofollow">http://jsfiddle.net/AdKd8/1/</a></p>
  
  <p>HTML:
      
          
             rating: 
             
          
      </p>
  
  <pre><code>&lt;br&gt;need simular result:
  e.g 1
  &lt;span class="tb-ratings cap" ng-bind-html-unsafe="stars"&gt;
      &lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>i{
      background-color: #f093f0;
      height: 10px;
      width: 10px;
      margin: 5px;
      display:block;
  }
  
  .cap i{
      background-color: red;
  }
  
  .crown i{
      background-color: green;
  }
  
  .blue i{
      background-color: blue;
  }
  </code></pre>
  
  <p>JS:
      function RateCtrl($scope) {
        $scope.rating = 14;
      }</p>
  
  <pre><code>angular.module('myapp', []).
    directive('myrating', function() {
          var directive = { restrict: 'E', replace: true, scope: { rating: '=' } };
        directive.template = "&lt;h1&gt;&lt;span class='tb-ratings {{class_value}}' ng-bind-html-unsafe='stars'&gt;&lt;/span&gt;{{stars}}&lt;/h1&gt;";
  
          directive.link = function(scope, element, attributes) {
             function gen_html(rating_value){
                  if(!rating_value){
                    return
                  }
  
                  scope.class_value = "";
                  var stars_count = 0;
                  var step = 5
                  var class_arr = ["blue", "cap", "crown"];
  
                  for(var i=0; i&lt;3; i++){
                      if(rating_value &gt; step){
                          scope.class_value = class_arr[i];
                          stars_count = rating_value - step;
                      }
                      step+=5;
                  }
  
                  scope.stars = "";
                  for(var i=0;i&lt;stars_count;i++){
                      scope.stars+="&lt;i&gt;&lt;/i&gt;";
                  }
              }
              gen_html(scope.rating);
          }
  
          return directive;
    })
  </code></pre>
  
  <p>Example:
  <a href="http://jsfiddle.net/AdKd8/1/" rel="nofollow">http://jsfiddle.net/AdKd8/1/</a></p>