How to hide/show block in ng-repeat?

Question

JavaScript

Hello! We have a primitive structure:
html:

<ol id="list_2" class="list_2" ui-sortable="SortCtrl.list2Options" ng-model="SortCtrl.list2">
    <li ng-repeat="app in SortCtrl.list2" <!--если вставить сюда ng-click, PHPStorm ругается что он "not allowed here" -->> {{ app.name }} </li>
</ol>

<ol ng-model="SortCtrl.list2">
    <li class="list-type-option" ng-repeat="app in SortCtrl.list2">
        <input type="text" ng-model="app.name"> <input type="text" ng-model="app.type">
    </li>
</ol>

js:

(function () {
    angular
        .module('testSortable', [])
        .controller('TestSortableController', function () {
            this.list2 = [
                { name: "another name", type: "input" },
                { name: "another second name", type: "result" }
            ];
        });

})();

I can't figure out how to hide/show blocks (li) of the second list when clicking on the first (li)
PS

Answer 1

Something like this, a can be replaced with a button, php-storm swears, apparently due to semantics

<ol id="list_2" class="list_2" ui-sortable="SortCtrl.list2Options" ng-model="SortCtrl.list2">
    <li ng-repeat="app in SortCtrl.list2"> 
       <a ng-click="app.visible = !app.visible">{{ app.name }}</a> 
    </li>
</ol>

<ol ng-model="SortCtrl.list2">
    <li class="list-type-option" ng-repeat="app in SortCtrl.list2" ng-show="app.visible">
        <input type="text" ng-model="app.name"> <input type="text" ng-model="app.type">
    </li>
</ol>

(function () {
    angular
        .module('testSortable', [])
        .controller('TestSortableController', function () {
            this.list2 = [
                { name: "another name", type: "input", visible: true },
                { name: "another second name", type: "result", visible: true }
            ];
        });

})();