AngularJS select tag not populating with object data when in ng-repeat

Question

I have an issue with angularjs's select directive.

Here is my code:

<ul class="thumbnails">
    <li class="span4" ng-repeat="product in productsDTO">
        <div class="thumbnail">

        ...
        ...
        ...


        <div class="span4" ng-repeat="varCat in product.varietyCategoriesAndOptions">
            {{varCat.varietyCategoryName}}
            <br />

            <br /><br />

            <select ng-model="varCat.varietyCategoryOption" ng-options="varietyCategoryOptionTransfer.varietyCategoryOptionId as varietyCategoryOptionTransfer.varietyCategoryOptionValue for varietyCategoryOptionTransfer in varCat.varietyCategoryOptions">
                <option value="">Select color</option>
            </select>

        </div>

        ...
        ...
        </div>
    </li>
</ul>

I have a $http call that returns json which gets added to the local scope.

function getProductsByCategoryIdServiceCall(CategoryService, categoryId){
          CategoryService.getProductsByCategoryId(categoryId).success(function(data){
              $scope.productsDTO = data;
          }).error(function(data){
                  $scope.productsDTO = null;
          });
      }

So basically I have a set of json objects returned from a webservice call, I set the local $scope to have those json objects, and the first iteration tag for productsDTO iterates over the newly populated objects.

Each product has a seperate object that shows what special categories this product has, and the options for those category(s). I am trying to have the select tag be bound (ng-model) to the varCat Object. This is the one currently being iterated over, and the same object that also contains the array of options for the category that I am trying to set for the select tag directive. I added a special field on the varietycategory object called varietycategoryoption specifically to hold the current state of that particular select category. I'm doing it this way because there could be many many of these category select's per page, and it is unknown how many, so I can't just hard code it into the page.

It doesnt seem to be working. Does anyone have any advice?

All of the json is a lot of data, but here is the part of the json return inside product that has all of the values associated with the select box:

"varietyCategoriesAndOptions":{"1":{"varietyCategoryId":111,"varietyCategoryName":"color","varietyCategoryOptions":{"202":{"varietyCategoryOptionId":202,"varietyCategoryOptionValue":"red"},"203":{"varietyCategoryOptionId":203,"varietyCategoryOptionValue":"blue"}},"varietyCategoryOption":null}}

**UPDATE******************* user Chandermali said I was treating my data like it was in array format, when it is in object format. Chandermali said to use this format

(key, value) in product.varietyCategoriesAndOptions

I tried this in my select

<select ng-model="varCat.varietyCategoryOption" ng-options="(varietyCategoryOptionTransfer.varietyCategoryOptionId, varietyCategoryOptionTransfer.varietyCategoryOptionValue) in varCat.varietyCategoryOptions">
       <option value="">Select color</option>
  </select>

And got this error:

 Error: [ngOptions:iexp] Expected expression in form of '_select_ (as _label_)? 
 for (_key_,)?_value_ in _collection_' but got 
 'varietyCategoryOptionTransfer.varietyCategoryOptionId, 
 varietyCategoryOptionTransfer.varietyCategoryOptionValue in 
 varCat.varietyCategoryOptions'.

Answer 1

This change in the select tag was enough for it to work for me.

      <select ng-model="varCat.varietyCategoryOption" ng-options="value.varietyCategoryOptionId as value.varietyCategoryOptionValue for (key,value) in varCat.varietyCategoryOptions">
            <option value="">Select color</option>
     </select>

I just had the wrong formatting on the select directive to access my object graph. The select box is now being populated with the data. Thank you very much for you patience.

Answer 2

Seeing your json neither your varietyCategoriesAndOptions or varietyCategoryOptions are array. These are object maps. You need to use the syntax for object map like

(key, value) in expression – where key and value can be any user defined identifiers, and expression is the scope expression giving the collection to enumerate.

For example: (key, value) in product.varietyCategoriesAndOptions