title: AngularJs Custom Directive scope data overwritten
body: <p>I have displayed the products based on branch and billing account. In the product template, i have a "+" button, if we click on the button, then i'm displaying the particular product id below that product template. </p>
  
  <p>Now the problem is, when i click the "+" button of "Product 1" , then it display product id as "300152". its fine. After that If i click the "+" button next to "Product 2", its displaying product id as "300153" below both "Product 1" and "Product 2". This is the issue. Please check the following fiddle. Any help would be greatly appreciated. </p>
  
  <p><a href="http://jsfiddle.net/fokv7Lhh/31/" rel="nofollow noreferrer">JS Fiddle</a></p>
  
  <pre><code>TabsApp.directive('productTemplate', ['$compile', 
                                                   function($compile){
       return {
          restrict: "E",
          scope: {
        branchdata : '='
          },
      //templateUrl : templateSupportTabV3, 
    template: ' &lt;li ng-repeat= "(prod_index, product) in branchdata.moduleLevel3List   "&gt;&lt;span class="normal-negrita"&gt;{{product.name}} (ID.{{product.id}})&lt;/span&gt;&lt;a class = "cursor" ng-click="load_productInfo_branch(  branch_index + 1 ,  prod_index + 1 ,  product.id  , branchdata.id );"&gt;&lt;span id="more_product_body_{{branchdata.id}}_{{ product.id }}" class="normal" style="font-size:10px;"&gt; &amp;nbsp;+&amp;nbsp;&lt;/span&gt; &lt;/a&gt;&lt;div id="product_body_{{branchdata.id}}_{{product.id}}" class="product_panel_container"&gt;&lt;/div&gt;&lt;/li&gt; ',
          link: function (scope, elem, attrs) {
  
              scope.load_productInfo_branch = function(baIndex, productIndex, productId,branchId){ 
                   debugger;
  
                    scope.prdouctType = productId; 
                    var resp = "&lt;p &gt;ID : {{prdouctType}} &lt;/P&gt;";
                    var divId = document.getElementById("product_body_" + branchId+"_"+productId);
  
                    divId.innerHTML=resp;
                    $compile(divId)(scope);
  
  
              };
   }
      };
  }]); 
  </code></pre>