AngularJs Custom Directive scope data overwritten - angularjs

Question

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;"> + </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);
};
}
};
}]);

Answer 1

You are using two-way binding while adding new DOM child; and there is one "prdouctType" in the scope. So,
var resp = "<p >ID : {{prdouctType}} </P>";
should be something like
var resp = "<p >ID : " + scope.prdouctType + "</P>";

Answer 2

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>";

Answer 3

Add in bindToController:
bindToController: true,
scope: {
branchData: '='
}
That should stop it happening.

Answer 4

Hello If you want to keep the {{prdouctType}} the same. You can try something like this.
You can hide the previous div and open the new one.
var TabsApp = angular.module('TabsApp', []);
TabsApp.controller('IndexCtrl', function ($scope) {
$scope.tabdata =[{"id":49844,"name":"Billing account 1","entityType":"BA","moduleLevel2List":[{"id":2239,"name":"branch 1","entityType":"BRANCH","moduleLevel3List":[{"id":300152,"name":"PRoduct 1","entityType":"PRODUCT"},{"id":300153,"name":"PRoduct 2","entityType":"PRODUCT"},{"id":300154,"name":"PRoduct 3","entityType":"PRODUCT"}]}]},{"id":49845,"name":"Billing account 2","entityType":"BA","moduleLevel2List":[{"id":2240,"name":"branch 2","entityType":"BRANCH","moduleLevel3List":[{"id":300127,"name":"PRoduct 4","entityType":"PRODUCT"}]}]}];
});
TabsApp.directive('supportTabV3Directive', ['$compile',
function($compile){
return {
restrict: "E",
scope: {
tabdata : '='
},
//templateUrl : templateSupportTabV3,
template: '<li name="billing_{{ ba_index + 1}}" ng-repeat = "(ba_index, ba) in tabdata "><span class="bold">{{ba.name}} (ID. {{ba.id}})</span><ul><li ng-repeat = "(branch_index, branch) in ba.moduleLevel2List "><span class="normal">Nombre: {{branch.name}}</span><ul><product-template branchdata="branch" ></product-template></ul></li>',
link: function (scope, elem, attrs) {
}
};
}]);
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>{{productType}} </span> <span id="more_product_body_{{branchdata.id}}_{{ product.id }}" class="normal" style="font-size:10px;"> + </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){
scope.prdouctType = productId;
if(document.querySelector('#test'))
{
document.querySelector('#test').remove()
}
var resp = "<p id='test'>ID : {{prdouctType}} </P>";
var divId = document.getElementById("product_body_" + branchId+"_"+productId);
console.log(divId);
divId.innerHTML=resp;
$compile(divId)(scope);
};
}
};
}]);
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js
"></script>
<body>
<div ng-app = "TabsApp">
<div ng-controller="IndexCtrl">
<support-tab-v3-directive tabdata="tabdata"></support-tab-v3-directive>
</div>
</div>
</body>
</html>
You can run the above snippet
(OR)
HEre is a DEMO for it