从嵌套的json对象AngularJS创建多个复选框

正如标题所说，我正在尝试呈现一组复选框元素，这些元素是由我从php文件中AJAX加入的JSON对象创建的。我不知道如何到达最深的嵌套对象。

我能够呈现一个包含顶级产品的选择框，但是当顶级产品包含产品选项时，我无法让它呈现。

<?php
$electrical = [
   "products"  =>
    [
        [
            "name"  => "LED Spotlight Kit",
            "id"    => 1,
            "product_options"  =>
            [
                [
                    "name"      => "Dual 60W Lights",
                    "id"        => 10,
                    "active"    => true
                ],[
                    "name"      => "120W Light Bar",
                    "id"        => 11,
                    "active"    => true
                ]
            ]
        ],
        [
            "name"  => "Bilge Pump",
            "id"    => 2,
            "product_options"  =>
            [
                [
                    "name"      => "1100GPH Manual",
                    "id"        => 12,
                    "active"    => true
                ],[
                    "name"      => "1100GPH Automatic",
                    "id"        => 13,
                    "active"    => true
                ]
            ]
        ],
        [
            "name"  => "12v Plug",
            "id"    => 3,
            "product_options"  =>
            [
                [
                    "name"      => "Rear",
                    "id"        => 14,
                    "active"    => true
                ],[
                    "name"      => "Mid Ship",
                    "id"        => 15,
                    "active"    => true
                ]
            ]
        ],
        [
            "name"  => "Rocker Panel Switches (Includes 12v plug)",
            "id"    => 4
        ],
        [
            "name"  => "LED Side Navigation Lights (Front red and green bow light upgrade)",
            "id"    => 5
        ],
        [
            "name"  => "Cranking Battery",
            "id"    => 6
        ],
        [
            "name"  => "Deep Cycle Trolling Battery",
            "id"    => 7
        ],
        [
            "name"  => "On Board Charger",
            "id"    => 8,
            "product_options"  =>
            [
                [
                    "name"      => "1 Bank",
                    "id"        => 16,
                    "active"    => true
                ],[
                    "name"      => "2 Banks",
                    "id"        => 17,
                    "active"    => true
                ],[
                    "name"      => "3 Banks",
                    "id"        => 18,
                    "active"    => true
                ],[
                    "name"      => "4 Banks",
                    "id"        => 19,
                    "active"    => true
                ]
            ]
        ],
        [
            "name"  => "Trolling Motor Plug and Wiring (Must have to operate trolling motor)",
            "id"    => 9
        ],
        [
            "name"  => "Extreme Navigation Light (Rear stern light upgrade)",
            "id"    => 10
        ]
    ]
];
echo json_encode($electrical);

这是我的Angular控制器和路由:

'use strict';
angular.module('wizard.electrical', ['ui.router'])
.config(['$stateProvider', function($stateProvider)
{
    $stateProvider.state("electrical",
    {
        url: "/electrical",
        controller: 'ElectricalCtrl',
        views:
            {
                'electrical@':
                {
                    templateUrl: 'modules/electrical/electrical.html'
                }
            }
    });
}])
.controller('ElectricalCtrl', ['$rootScope', '$scope', '$http', function($rootScope, $scope, $http)
{
    $scope.electrical   = [];
    $http.get(Config.defaultPath + 'mock/getElectricalData.php')
    .success(function(data, status, headers)
    {
        $scope.electrical = data;
        console.log($scope.electrical);
    })
    .error(function(data, status, headers, config)
    {
        console.log("Error loading electrical options")
    });
    $scope.LoadSubElectricOptions = function()
    {
        //TODO
    };
}]);

最后，这里的html将正确渲染选择框，但不包括复选框

<div class="container" ng-controller="ElectricalCtrl">
    <div class="formContent left">
    <select name="selectElec" ng-model="electricalData.products"
            ng-options="item as item.name for item in electrical.products">
    </select>
    <div id="tabs" class="tabs">
        <tabset>
            <tab ng-repeat="tab in electricData.products.product_options" heading="{{tab.name}}" ng-model="electricData.products.selected" active="tab.active" disable="tab.disabled">
                <div class="non-scrollable-container">
                    <div class="group-box" ng-repeat="product in filteredElectric = (tab.product | filter: {active: true})">
                        <div class="left">
                            <input type="checkbox" ng-model="electricData.products.selected.model" name="electric" ng-value="electric">{{electric.name}}
                        </div>
                    </div>
                </div>
            </tab>
        </tabset>
    </div>

    </div>
    <div class="submitBtn">
        <button ng-click="section.SaveAndNext(electrical, $event)">Next</button>
    </div>
</div>