title: AngularJS - ng-repeat - using parent repeat data in child http request
body: <p>I have what would seem to be a simple problem with AngularJS - apologies if so. I'm new and have searched all over and can't quite find an answer to what I want to do.</p>
  
  <p>Basically I have a $http request that is getting a list of 'Cards' from a server which I'm then using ng-repeat to build in the HTML. I then want to populate those Cards with a number of 'Metrics' - also retrieved from the server. I have a controller for the 'Cards' (parents) and a separate controller for the 'Metrics' (children).</p>
  
  <p>My issue is that I can't work out how to reference the ID of the parent 'Card' when making the child $http request.</p>
  
  <p>Below is the HTML &amp; JS that I am using - any help would be appriciated:</p>
  
  <hr>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="Dashboard container-fluid" ng-controller="DahsboardCardController as Dashboard"&gt;
  
      &lt;div ng-repeat="Card in Dashboard.DashboardCards"&gt;
  
          &lt;div class="DashboardCard card"&gt;
              {{Card.CardDisplayName}}
  
              &lt;div class="DashboardCardBody" ng-controller="DahsboardMetricController as Metric"&gt;
                  &lt;div ng-repeat="Metric in Metric.DashboardMetrics"&gt;
                      {{Metric.MetricDisplayName}}
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>(function () {
      var app = angular.module('OtterDashboard', [ ]);
  
      app.controller('DahsboardCardController', [ '$http', function($http) {
  
          //Declare a varaible for the data
          var DashboardCards = this;
  
          //Set the varaiable to an empty array to receive the data
          DashboardCards.DashboardCards = [ ];
  
          $http({
              //Request the data
              method: 'GET',
              dataType: 'jsonp',
              url: '/api.svc/tbl_Card',
              useDefaultXhrHeader: false,
              headers: {'Content-type': 'application/json'},
              headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'},
              crossDomain: true,
          }).then(function successCallback(data) {
              //The data was sucessfully received, populate the variable with it
              DashboardCards.DashboardCards = data.data.d.results;
          }, function errorCallback(response) {
              //There was an error
              console.log('Card data could not be retrieved');
          });
  
      }]);
  
      app.controller('DahsboardMetricController',  ['$http', function($http, Card) {
  
          //Declare a varaible for the data
          var DashboardMetrics = this;
  
          //Set the varaiable to an empty array to receive the data
          DashboardMetrics.DashboardMetrics = [ ];
  
          $http({
              //Request the data
              method: 'GET',
              dataType: 'jsonp',
              url: '/api.svc/DashboardMetric?Card=%27' + **???reference to parent card ID???** + '%27',
              useDefaultXhrHeader: false,
                  headers: {'Content-type': 'application/json'},
                  headers: {'Accept': 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5'},
                  crossDomain: true,
          }).then(function successCallback(data) {
              //The data was sucessfully received, populate the variable with it
              DashboardMetrics.DashboardMetrics = data.data.d.results;
          }, function errorCallback(response) {
              //There was an error
              console.log('Metric data could not be retrieved');
          });
  
      }]);
  
  })();
  </code></pre>
  
  <hr>
  
  <p><strong>Thank you!</strong></p>