Binding ng-repeat object name not working

Question

I'm trying to bind a ng-repeat object name coming from a parent repeat (see "dType.name") but the name won't bind. I've tried two methods:

(this is just a snippet)

**HTML:** 
(1)

    <div ng-repeat="dType in dishesTypes">                           
      <span class="small-title" class="separator">{{dType.name}}</span>                       
      <div class="row" ng-repeat="(key,dish) in dType.name">               
          <div class="col-md-6">{{dish.dish}}</div>
          <div class="col-md-1">{{dish.type}}</div>                       
      </div>
    </div>

(2) 

    <div ng-repeat="dType in dishesTypes">                           
      <span class="small-title" class="separator">{{dType.name}}</span>                       
      <div class="row" ng-repeat="(key,dish) in dValues[dType.name]">               
          <div class="col-md-6">{{dish.dish}}</div>
          <div class="col-md-1">{{dish.type}}</div>                       
      </div>
    </div>


**Javascript**

    menuApp.controller('appController', ['$scope',  
        function($scope){

        $scope.dishesTypes = [
            {name:'main'},
            {name:'sides'},
            {name:'desserts'}
        ];

        $scope.dValues = {main: 'main', sides: 'sides', desserts: 'desserts'};

        $scope.main = // some values from DB;
        $scope.sides = // some values from DB;
        $scope.desserts = // some values from DB;

}]);

Thanks in advance for any help!

Answer 1

Your second method is trying to iterate over a string. It's not resolving the result of dValues[dType.name] a second time to give you the object you're looking for. To work around this, you can wrap it with $eval to force another evaluation.

<div ng-repeat="dType in dishesTypes">                           
  <span class="small-title" class="separator">{{dType.name}}</span>                       
  <div class="row" ng-repeat="dish in $eval(dValues[dType.name])">               
      <div class="col-md-6">{{dish.dish}}</div>
      <div class="col-md-1">{{dish.type}}</div>                       
  </div>
</div>

Here's a working plunker: http://plnkr.co/edit/Cow37iL2nN2L6mcDPND3?p=preview

You could also just call a function, and resolve everything in your controller, like this: http://plnkr.co/edit/E2vQEaVQHEOvJqIihcOD?p=preview

<div ng-repeat="dType in dishesTypes">                           
  <span class="small-title" class="separator">{{dType.name}}</span>                       
  <div class="row" ng-repeat="dish in getDishes(dType.name)">               
      <div class="col-md-6">{{dish.type}}</div>
      <div class="col-md-1">{{dish.dish}}</div>                       
  </div>
</div>

$scope.getDishes = function(item)
{
  return $scope.$eval($scope.dValues[item]);
}