title: AngularJS : values not binded in directive
body: <p>I'm trying to use this code <a href="https://stackoverflow.com/a/20096401/2542165">https://stackoverflow.com/a/20096401/2542165</a> in my AngularJS app as a directive. This code merge consecutive cells containing the same values (with rowspan).</p>
  
  <p>My table is generated with a ng-repeat, and my problem is that, inside my directive, the compared values are <code>"{{item.value1}}"</code> and <code>"{{item.value2}}"</code> instead of the real values.</p>
  
  <p>In the example below, the two last lines are merged, but should not.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('plunker', []);
  app.controller('DemoController', function ($scope) {
   $scope.items = 
   [
     {
      "value1":"value1",
      "value2":"value2",
     },
     {
      "value1":"value1",
      "value2":"value4",
     }
   ]
  
  });
  app.directive('mergeTable', [function() {
   return {
    restrict: 'A',
    link: function(scope, element, attrs) {
     
     function merge() {
      var mergeTableColIndex = attrs.mergeTableColIndex;
      var table = element;
      var rows = table.find($("tr"));
      var colsLength = $(rows[0]).find($("td")).length;
      var removeLater = [];
      for (var i = 0; i &lt; colsLength; i++) {
       if(mergeTableColIndex.indexOf(i) !== -1) {
        var startIndex = 0;
        var lastIndex = 0;
        var startText = $($(rows[0]).find("td")[i]).text();
        for (var j = 1; j &lt; rows.length; j++) {
         var cRow = $(rows[j]);
         var cCol = $(cRow.find("td")[i]);
         var currentText = cCol.text();
         if (currentText == startText) {
          removeLater.push(cCol);
          lastIndex = j;
         } else {
          var spanLength = lastIndex - startIndex;
          if (spanLength &gt;= 1) {
           $($(rows[startIndex]).find("td")[i]).attr("rowspan", spanLength + 1);
          }
          lastIndex = j;
          startIndex = j;
          startText = currentText;
         }
   
        }
        spanLength = lastIndex - startIndex;
        if (spanLength &gt;= 1) {
         $($(rows[startIndex]).find("td")[i]).attr("rowspan",
           spanLength + 1);
        }
       }
      }
      
      for(i in removeLater){
       $(removeLater[i]).remove();
      }
     }
     
      scope.$watch(attrs.mergeTable, function(value) {
       merge();
      });
    }
   };
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div ng-controller="DemoController"&gt;
        &lt;table border="1" merge-table-col-index='[0,1,2]' merge-table='items'&gt;
          &lt;tr&gt;
            &lt;td&gt;a&lt;/td&gt;
            &lt;td&gt;b&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;a&lt;/td&gt;
            &lt;td&gt;c&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr ng-repeat='item in items'&gt;
            &lt;td&gt;{{item.value1}}&lt;/td&gt;
            &lt;td&gt;{{item.value2}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>