Has to be something simple.. but I am new to Angular - angularjs

Question

This is the problem that I'm coming across...
I am returning an http to display some data in a repeat..
$scope.search = function() {
$http.get("attemptsJSON.php?q="+$scope.svalue)
.success(function(response) {
$scope.attempts = response;
});
}'
That data I have a click function to return even more data. But that data is determined on the previous data which has a link to it like this.
$scope.getAllAtt = function(a) {
$http.get("allAttemptsJSON.php?a="+a)
.success(function(response) {
$scope.allAttempts=response;
});
}
the problem is that returned data is showing on every instance of my intial repeat and I only want it to show below the one that is clicked. I looked at so many different possibilities like Template caching, but I have no idea how to go about this I am somewhat new to Angular and I think I need to use a directive but directives confuse me. Please help.
Here is the HTML
<tr ng-repeat-start="att in attempts">
<td class="expand-col" ng-click="getAllAtt(att.action_id)"><i class="fa fa-plus-circle"></i></td>
<td>{{att.cust_no}}</td>
<td>{{att.emp_name}}</td>
<td>{{att.attemptdt}}</td>
<td>{{att.note}}</td>
<td>{{att.callstatus}}</td>
</tr>
<tr ng-repeat-end ng-repeat="x in allAttempts">
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{x.note}}</td>
<td></td>
</tr>'

Answer 1

If you want a set of values that only belong to one item in your repeating items, then you should assign those to your repeating item, not to the whole scope:
<tr ng-repeat-start="att in attempts">
<td class="expand-col" ng-click="getAllAtt(att)">
<i class="fa fa-plus-circle"></i></td>
<td>{{att.cust_no}}</td>
<td>{{att.emp_name}}</td>
<td>{{att.attemptdt}}</td>
<td>{{att.note}}</td>
<td>{{att.callstatus}}</td>
</tr>
<tr ng-repeat-end ng-repeat="x in att.allAttempts">
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{x.note}}</td>
<td></td>
</tr>
$scope.getAllAtt = function(attempt) {
$http.get("allAttemptsJSON.php?a=" + attempt.action_id)
.success(function (response) {
attempt.allAttempts = response;
});
};
This includes some simplifications since I don't have access to your HTTP sources or CSS, but it demonstrates the concept:
http://jsfiddle.net/femt86u9/