ng-repeat ng-click showing only last value from an array

Question

I am trying to show the details of each of my values from my data in a pop up window however, only last value from an array is shown three times instead of three different values.

This is my html:

  <div ng-repeat="value in all | filter: (!!locationFilter || undefined) && {type: locationFilter} | filter: priceFilter | filter: datesFilter | orderBy:sortProp">
                  <ul>
                     <li><img src="app/images/{{value.image}}.jpg" alt="Smiley face" height="100" width="240"></li>
                     <li><strong>{{value.id}}</strong></li>
                     <li><strong>{{value.address}}</strong></li>
                     <li>city: {{value.city}}</li>
                     <li>postcode: {{value.postcode}}</li>
                     <li>price: £{{value.price}}</li>
                     <li>num_of_beds: {{value.num_of_beds}}</li>
                     <li>{{value.type}}</li>
                     <li>{{value.minutes}}</li>
                     <li>{{value.added}}</li>
                  </ul>
                     <div ng-click="togglePopup(value)">
                     view details
                        <div class="modal-outer" ng-if="showPopup">
                           <div class="modal-container">
                           {{selectedValue.address}}
                              <div ng-repeat="subValue in value.details track by $index">
                                 <ul>
                                    <li>{{subValue.desc}}</li>
                                    <li>{{subValue.info}}</li>
                                 </ul>
                              </div>
                           </div>
                        </div>
                     </div>
               </div>

and the javascript function:

$scope.showPopup = false;
        $scope.selectedValue = {};

        $scope.togglePopup = function(value) {
           $scope.showPopup = !$scope.showPopup;
           if (value) 
            $scope.selectedValue = value;   
        };

My data:

"allData": {

        "patientsData": {

            "patients": [{
                "id": 1,
                "image": "amsterdam",
                "address": "17 Peregrine House",
                "city": "London",
                "postcode": "SW11 2NL",
                "price": "150.000",
                "num_of_beds": 1,
                "type": "terraced",
                "minutes": 20,
                "added": "Jan 6 2017",
                "details": [{
                    "desc": "Beautiful terraced house looking like houses in Amsterdam",
                    "info": "dcjkbc"
                }]
            }, {
                "id": 2,
                "image": "dutch",
                "address": "22 Portland House",
                "city": "London",
                "postcode": "SW12 2SE",
                "price": "800.000",
                "num_of_beds": 3,
                "type": "detached",
                "minutes": 10,
                "added": "Dec 28 2016",
                "details": [{
                    "desc": "Dutch house in the countryside",
                    "info": "dcjkbc"
                }]
            }, {
                "id": 3,
                "image": "evy",
                "address": "2 Holland Road",
                "city": "London",
                "postcode": "SW10 2RE",
                "price": "950.000",
                "num_of_beds": 4,
                "type": "terraced",
                "minutes": 5,
                "added": "Jan 5 2017",
                "details": [{
                    "desc": "Newly decorated house",
                    "info": "dcjkbc"
                }]
            }]
          }
       }

when I click view details ng-click="togglePopup(value) it shows the popup but only displaying the last value from subarray called details from my json so it would only show Newly decorated house and dcjkbc for all houses so it would be displayed three times. I would appreciate any help.

Answer 1

According to the documentation it is better practice to track by an objects id when it is available anyway:

If you are working with objects that have a unique identifier property, you should track by this identifier instead of the object instance. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance. If you don't have a unique identifier, track by $index can also provide a performance boost.

Since you have an id value you should track by value.id instead:

<div ng-repeat="subValue in value.details track by value.id">

And here is a link to their documentation: https://docs.angularjs.org/api/ng/directive/ngRepeat

As far as your error, your code works totally fine. Here is a link to a working codepen:

http://codepen.io/egerrard/pen/egvOaX

Your problem is in some other code that isn't shared here.