Rozwiń i zwiń za pomocą kątowego js

Próbuję wymyślić sposób na rozszerzenie i zwinięcie za pomocą angular js. Nie udało mi się znaleźć eleganckiego sposobu, aby to zrobić bez manipulowania obiektami dom w kontrolerze (co nie jest kanciastym sposobem). Obecnie mam ładny sposób, aby to zrobić dla jednej warstwy rozwiń i zwiń. Jednak kiedy zaczynam zagnieżdżać, sprawy się komplikują i nie działają tak, jak chcę (rozszerzanie i zapadanie się wielu obszarów, gdy nie powinno być). Problem przychodzi mi nie wiedząc jak aby wysłać unikalny identyfikator z ng-Kliknij, aby tylko rozwinąć / zwinąć odpowiednią treść. Powinienem wspomnieć, że te elementy są w ng-repeat, więc mogę koniecznie dostosować parametry wysyłane.

Udało mi się użyć tego jsfiddle, aby pomóc mi rozwinąć i zwinąć jedną warstwę do pracy. Jednak jest to Przełącznik sposób, aby to zrobić i chcę, aby użytkownik był w stanie utrzymać rzeczy rozszerzone podczas rozszerzania innych. Więc co zrobiłem, aby naprawić to było użycie tablicy i za każdym razem coś jest kliknięcie indeks tego klikniętego elementu zostanie dodany do tablicy i klasa zostanie rozszerzona. Gdy użytkownik kliknął ponownie indeks został usunięty z tablicy i obszar został zwinięty.

Innym sposobem, który odkryłem, że możesz to zrobić, jest użycie dyrektyw. Ale tak naprawdę nie mogę znaleźć żadnego przykładu, aby zawinąć głowę wokół tego, jak działają dyrektywy. Nie jestem pewien, jak zacząć pisać dyrektywy.

Moja obecna konfiguracja jest taka:

function Dexspander($scope) {
    $scope.ExpandArray = [];

    //Push or pop necessary elements for tracking
    $scope.DespopulatArray = function (identifier, element) {
    if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
            $scope.ExpandArray.splice(_.indexOf($scope.ExpandArray, identifier + element), 1);
        } else {
            $scope.ExpandArray.push(identifier + element);
        }
    }

    //Change class of necessary elements
    $scope.Dexspand = function (identifier, element) {
        if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
            return "expand";
        } else {
            return "collapse";
        }
    }
}

<div class="user-header" ng-repeat="user in users">
    <h1 ng-click="DespopulatArray('user', $index)">Expand</h1>
</div>
<div class="user-content" ng:class="Dexspand('user', $index)">
    <div class="content">
        <div class="user-information">
            <div class="info-header">
                <h1 ng-click="DespopulatArray('info', $index)>Some Information</h1>
            </div>
            <div class="info-contents" ng:class="Dexspand('info', $index)">
                stuff stuff stuff stuff...
            </div>
        </div>
    </div>
</div>

Problem z tą konfiguracją polega na tym, że jeśli mam do rodzica divs expanded i te oba mają coś pod nimi do rozwinięcia, kliknięcie ROZWIŃ TEKST rozwinie je w obu obszarach, ponieważ nie są one unikalne.