Angular JS - переключатель одиночного контента из списка

Я пытаюсь преобразовать свои базовые кодировки html / jquery в angular. Я новичок в angular, поэтому будет полезен любой указатель на то, как это правильно сделать.

Итак, у меня есть список. Каждый список содержит основной контент и вспомогательный контент, который изначально скрыт. Мне нужно иметь возможность скрывать / отображать конкретное вспомогательное содержимое для каждого списка.

Вот мой базовый код html / jquery:

<style>
.toggler
{
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size:16px;
    text-align: center;
    transition: all 200ms ease-in-out;
}
.toggler.opened
{
    transform: rotate(180deg);
    font-size:22px;
}
.sub-content
{
    display: none;
}
</style>
<!-- this list comes from php loop -->
<li>
    <div class = "row">
        <div class = "col-10">
            MAIN CONTENT HERE
        </div>
        <div class = "col-2">
            <a class = "toggler" href = "javascript:void(0);"><i class = "fa fa-chevron-down"></i></a>
        </div>
    </div>
    <div class = "row sub-content">
        <div class = "col-12">
            SUB CONTENT HERE
        </div>
    </div>
</li>
<li>
    <div class = "row">
        <div class = "col-10">
            MAIN CONTENT HERE
        </div>
        <div class = "col-2">
            <a class = "toggler" href = "javascript:void(0);"><i class = "fa fa-chevron-down"></i></a>
        </div>
    </div>
    <div class = "row sub-content">
        <div class = "col-12">
            SUB CONTENT HERE
        </div>
    </div>
</li>


<script>
    $(".toggler").click(function()
    {
        $(this).toggleClass("opened");
        $(this).closest("li").find(".sub-content").toggle(200);
    });
</script>

А вот мой текущий угловой код:

<style>
.toggler
{
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size:16px;
    text-align: center;
    transition: all 200ms ease-in-out;
}
.toggler.opened
{
    transform: rotate(180deg);
    font-size:22px;
}
</style>

<ul>
    <li data-ng-repeat = "content in contents">
        <div class = "row">
            <div class = "col-10">
                {{content.main}}
            </div>
            <div class = "col-2">
                <a data-ng-click = "toggleSubContent();" class = "toggler {{opened}}"><i class = "fa fa-chevron-down"></i></a>
            </div>
        </div>
        <div class = "row sub-content" data-ng-hide = "hideSubCont">
            <div class = "col-12">
                {{content.sub}}
            </div>
        </div>
    </li>
</ul>

<script>
var app = angular.module('anguApp', []);

app.controller('anguCtrl',function($scope,$http){
    $scope.hideSubCont  = true;
    $scope.opened       = "";

    $scope.contents = [
        {
            main:"MAIN CONTENT HERE",
            sub:"SUB CONTENT HERE"
        },
        {
            main:"MAIN CONTENT HERE",
            sub:"SUB CONTENT HERE"
        },
        {
            main:"MAIN CONTENT HERE",
            sub:"SUB CONTENT HERE"
        }
    ];

    $scope.toggleSubContent = function()
    {
        $scope.opened       = $scope.opened == "opened" ? "" : "opened";
        $scope.hideSubCont  = $scope.hideSubCont ? false : true;
    };
});
</script>