The real issue here is that you're binding the details to a single array on your $scope, namely details
. As this reference is used in each iteration of the ng-repeat, you'll end up showing it everywhere.
Edit: As mentioned in the comments, the original question did not reflect what was actually asked. What was requested was that the details needed to be loaded in asynchronously and only when they were requested (clicked). I therefore updated the code example).
What changed?
HTML:
<li ng-repeat="item in items">
{{item.name}}
<a href="" ng-click="item.showDetails()">show details</a>
<p ng-show="item.detailsVisible" ng-repeat="detail in getDetails(item.id)">
{{detail.belongsToItem}}
</p>
</li>
JS:
var Item = function(id, name){
var promiseDetailsAreLoaded;
var self = this;
this.id = id;
this.name = name;
this.detailsVisible = false;
this.details = [];
this.showDetails = function(){
if(!promiseDetailsAreLoaded){
promiseDetailsAreLoaded = $http.get("").then(function(){
// mock adding details
for(var i = 0; i < itemDetails.length; i++){
if(itemDetails[i].belongsToItem === self.id){
self.details.push(itemDetails[i]);
}
}
});
}
promiseDetailsAreLoaded.then(function(){
self.detailsVisible = !self.detailsVisible;
});
}
};
$scope.items = [
new Item(1, "Item 1"),
new Item(2, "Item 2"),
new Item(3, "Item 3")
];