Data duplicating issue with JSON - angularjs

Question

I have included the code in http://codepen.io/sajoambattu/pen/MbezNa
I have 3 divs in which each div includes color selection, Memory and call plans. The call plans data is there after every device details(after the table).
All the data are depending on 3 JSONs. The color selection and Memory data is coming from devices JSON and call plans data is coming from callplans JSON. I have another JSON(planMapping) for mapping the device and call plan. All JSON's I have included in the JS file.
My requirement is based on the user selection of color and memory, respective call plans should display. Now the content is displaying, but the problem I'm facing is it's displaying the same content in all three sections(Apple, Samsung and Sony).
Issue Example:
Click iPhone 6s plus tab from the apple section and click on 32GB memory and then click any color, now iPhone 6s plus call plans will display. The problem is the same iPhone 6s plus call plans data is getting displayed in all other sections as well.
Any help would be appreciated.

Answer 1

I have updated your code....
http://codepen.io/anon/pen/dOpdXr
Changes :
HTML:
<div class="planDetails" ng-repeat="data in x.callPlanArr">
and also moved </div> of <div class="device_overview {{x.memory}}-{{x.presales_name.split(' ').join('-').replace('(','').replace(')','')}}" ng-repeat="x in v | orderBy:'memory'" ng-show="$first"> moved to end of the modified div.
JS:
item.callPlanArr = []; //at line 5770
and
item.callPlanArr.push($scope.callplanList.callplans[x]); //5784

Answer 2

Make following change to meet your requirement:
Shift div with class="callPlans" inside div with class="device_overview"
Here is the modification:-
<div class="device_overview {{x.memory}}-{{x.presales_name.split(' ').join('-').replace('(','').replace(')','')}}" ng-repeat="x in v | orderBy:'memory'" ng-show="$first">
<div class="device_detail">
<p>{{x.presales_vendor}}</p>
<h3>{{x.presales_name}}</h3>
<p>{{result}}</p>
</div>
<div class="color">
<div class="color-name">
<p>Choose color:</p>
<span ng-repeat="data in x.variants" class="{{data.s_code}}-{{x.presales_name.split(' ').join('-')}}" ng-show="$first">{{data.colour}}</span>
</div>
<div class="color-code" ng-repeat="data in x.variants" ng-click="changeImg(((data.s_code+' ')+(x.presales_name)).split(' ').join('-').replace('(','').replace(')',''));showPlan(x,data.s_code); showStock(data.s_code);" style="border-color:{{data.colour_code}};background-color:{{data.colour_code}}">{{data.colour_code}}</div>
</div>
<div class="callPlans" ng-if="device_class == x.device_class">
<div class="planDetails" ng-repeat="data in callPlanArr">
<div class="data">
<p>Data</p>
<h3>{{data.plan.data_allowance}}GB</h3>
</div>
<div class="minute">
<p>Minutes</p>
<h3>{{data.plan.call_allowance}}</h3>
</div>
<div class="text">
<p>Texts</p>
<h3>{{data.plan.text_allowance}}</h3>
</div>
<div class="upfront">
<ul>
<li ng-show="data.upfront != ''"><p>£{{data.upfront}}</p>up front</li>
<li><h2>£{{data.plan.rental}}/mth</h2></li>
</ul>
</div>
</div>
</div>
</div>
and add following line in $scope.showPlan function() of your controller
$scope.device_class = item.device_class;