AngularJs Custom Directive scope data overwritten

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.

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.

JS Fiddle

TabsApp.directive('productTemplate', ['$compile', 
                                                 function($compile){
     return {
        restrict: "E",
        scope: {
      branchdata : '='
        },
    //templateUrl : templateSupportTabV3, 
  template: ' <li ng-repeat= "(prod_index, product) in branchdata.moduleLevel3List   "><span class="normal-negrita">{{product.name}} (ID.{{product.id}})</span><a class = "cursor" ng-click="load_productInfo_branch(  branch_index + 1 ,  prod_index + 1 ,  product.id  , branchdata.id );"><span id="more_product_body_{{branchdata.id}}_{{ product.id }}" class="normal" style="font-size:10px;"> &nbsp;+&nbsp;</span> </a><div id="product_body_{{branchdata.id}}_{{product.id}}" class="product_panel_container"></div></li> ',
        link: function (scope, elem, attrs) {

            scope.load_productInfo_branch = function(baIndex, productIndex, productId,branchId){ 
                 debugger;

                  scope.prdouctType = productId; 
                  var resp = "<p >ID : {{prdouctType}} </P>";
                  var divId = document.getElementById("product_body_" + branchId+"_"+productId);

                  divId.innerHTML=resp;
                  $compile(divId)(scope);


            };
 }
    };
}]); 

Here is the working JS Fiddle: http://jsfiddle.net/fokv7Lhh/38/

You can use one way binding

var resp = "<p >ID : {{::prdouctType}} </p>";

Do you really need to apply to the scope? Another way to show the value is something like this:

var resp = "<p >ID : " + productId + "</p>";