value part of key value pair not accesible in ng-repeat

Question

I have the below HTML code with AngularJS

<div class="col-xs-1" style="width:130pt;background-color:#474747;border:2px ridge;">
    <div class="container-fluid"> 
        <ul class="nav">
            <li class="dropdown" style="width:140px;" ng-repeat = "page in homeCategoryList">
                <a class= "dropdown-toggle dropdown-menu-hover-color menu-left-color" data-toggle="dropdown" href="#" ng-repeat ="(key, value) in page">{{key}}</a>
                <ul class="dropdown-menu" style="position:absolute;float:right;top: 0; left: 140px;">
                    <li ng-repeat = "subcat in value">
                        <a class="dropdown-level1-color " href= "#" ng-repeat="(key,value) in subcat">{{key}}</a>
                        <ul type="none">
                          <li ng-repeat="childcat in value"><a href="3">{{childcat}}}</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

I want to represent the below JSON in the above html using angularjs. The problem is that I am able to access "electronics" but not its value which is an array."li ng-repeat="subcat in {{value}}" gives error Error: [$parse:syntax] Syntax Error: Token 'value' is unexpected, expecting [:] at column 3 of the expression [{{value}}] starting at [value}}].

[
    {
        "electronics": [
            {
                "cameras": [
                    "sony",
                    "panasonic",
                    "nikon",
                    "canon"
                ]
            },
            {
                "TV": "none"
            },
            {
                "laptop": [
                    "toshiba",
                    "hp",
                    "apple",
                    "samsung",
                    "sony",
                    "acer",
                    "lenovo"
                ]
            }
        ]
    },
    {
        "home": [
            {
                "furniture": [
                    "cupboard",
                    "table",
                    "chair"
                ]
            },
            {
                "couch": "none"
            },
            {
                "utensils": "none"
            }
        ]
    }
]

Could anyone kindly tell me how to access the value variable in the ng-repeat.

Answer 1

You will have to re-do your HTML/classes but take a look here: http://jsfiddle.net/Fs8eH/

You might want to consider using a tree directive if the layers get any deeper.

<ul ng-app ng-controller="MyCtrl">
    <li style="width:140px;" ng-repeat="page in homeCategoryList">
        <div ng-repeat="(key, value) in page"> <span>{{key}}</span>

            <ul>
                <li ng-repeat="item in value">
                    <div ng-repeat="(key, value) in item"> <span>{{key}}</span>

                        <ul>
                            <li ng-repeat="brand in value"> <span>{{brand}}
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </li>
</ul>