Многоуровневые таблицы (внутри другого при нажатии)

Сценарий

Позволяет сказать, что я являюсь владельцем крупной компании, у которой много магазинов. В зависимости от того, какую роль (место в организации) у меня есть в компании, у меня будет другой доступ к данным. Там будут разные модули, и для этого конкретного вопроса есть тот, где пользователи, имеющие доступ, могут проходить через ежедневную стоимость и продажи. (Если это законно или нет... все равно, это просто для примера.)

Таким образом, пользователь получает все данные через REST API из BackEnd (приложение Java) со всеми данными для всех магазинов, к которым у пользователя есть доступ. Затем пользователь должен иметь возможность фильтровать данные с помощью различных комбинаций фильтров. Наиболее актуальным для моего вопроса является интервал дат по дням.

Там будут некоторые диаграммы, показывающие данные на разных уровнях, и ниже будет область таблицы, где я хочу многоуровневые таблицы, следовательно, мой вопрос.

Выполнено до сих пор

• Сначала я создал аккордеоны, у которых есть хранилища на уровне аккордеонной группы, а затем следующий уровень данных в таблице, в пределах аккордеона. (Только жестко закодированные данные на данный момент.) Проблема заключалась в том, что соответствующий заголовок представляет собой строку, и после некоторого обсуждения мы почувствовали, что это не было хорошим решением, поскольку заголовок состоял бы из частей данных, которые в таблице были бы отдельные столбцы. Поэтому было бы сложно "коллизировать" данные заголовка, чтобы соответствовать горизонтальным разным "хранилищам" (между заголовками аккордеона) при свертывании (и, конечно, еще более беспорядочно, когда один или несколько аккордеона расширяются).
• Я заменил аккордеоны таблицей и ng-repeat. Успешно заполнили первый уровень таблицы как данными из переносного API с данными JSON, так и получили i18next для заголовков.

JSON

{ 
"metadata":{
    "storesInTotal":"25",
    "storesInRepresentation":"2"
},
"storedata":[
    { 
        "store" : {
            "storeId" : "1000",
            "storeName" : "Store 1",
            "storePhone" : "+46 31 1234567",
            "storeAddress": "Some street 1",
            "storeCity" : "Gothenburg"
        },
        "data" : {
            "startDate" : "2013-07-01",
            "endDate" : "2013-07-02",
            "costTotal" : "100000",
            "salesTotal" : "150000",
            "revenueTotal" : "50000",
            "averageEmployees" : "3.5",
            "averageEmployeesHours" : "26.5",
            "dayData" : [
                { 
                    "date" : "2013-07-01",
                    "cost" : "25000",
                    "sales" : "15000",
                    "revenue" : "4000",
                    "employees" : "3",
                    "employeesHoursSum" : "24"
                },
                {
                    "date" : "2013-07-02",
                    "cost" : "25000",
                    "sales" : "16000",
                    "revenue" : "5000",
                    "employees" : "4",
                    "employeesHoursSum" : "29"
                }
            ]
        }
    },
    {
        "store" : {
            "storeId" : "2000",
            "storeName" : "Store 2",
            "storePhone" : "+46 8 9876543",
            "storeAddress": "Big street 100",
            "storeCity" : "Stockholm"
        },
        "data" : {
            "startDate" : "2013-07-01",
            "endDate" : "2013-07-02",
            "costTotal" : "170000",
            "salesTotal" : "250000",
            "revenueTotal" : "80000",
            "averageEmployees" : "4.5",
            "averageEmployeesHours" : "35",
            "dayData" : [
                { 
                    "date" : "2013-07-01",
                    "cost" : "85000",
                    "sales" : "120000",
                    "revenue" : "35000",
                    "employees" : "5",
                    "employeesHoursSum" : "38"
                },
                {
                    "date" : "2013-07-02",
                    "cost" : "85000",
                    "sales" : "130000",
                    "revenue" : "45000",
                    "employees" : "4",
                    "employeesHoursSum" : "32"
                }
            ]
        }
    }
],
"_links":{
    "self":{
        "href":"/storedata/between/2013-07-01/2013-07-02"
    }
}
}

Наглядный пример - JSFiddle

Проверьте значения в рамке результата, в верхнем левом углу. Попробуйте щелкнуть, например, строку с Store ID 2000, затем с 3000 и затем 3000 снова, чтобы увидеть, как изменяются значения. Текущее обновление моего JSFiddle

Требуемая функциональность

Когда нажимается строка (как показано в JSFiddle), я хочу, чтобы директива или что-то срабатывало, чтобы пойти и получить базовые данные (dayData) для щелчка магазина и показать все дни в интервале дат. I. Расширяем строку и включаем новую таблицу под нажатой строкой, которая также должна использовать ng-repeat, чтобы все отображаемые данные были похожими на существующие, но встроенные.

Вопрос

Итак, у меня уже есть функциональность, чтобы получить индекс $index, а также конкретные данные из щелкнутой строки. Какую директиву или любое другое решение мне нужно дополнительно, чтобы получить "данные при щелчке по строке" и представленные в таблице под нажатой строкой?

Я не хочу этого в DOM все время, так как может быть много dayData для каждого магазина и много магазинов. (И будет использовать разбивку на страницы позже, но даже в этом случае, а не в DOM все время.) Это означает, что я должен иметь возможность добавлять ADD при нажатии на строку и при нажатии на то же или другое REMOVE из ранее нажатого.

---

ИЗМЕНИТЬ

Новый обновленный JSFiddle.