Angularjs / HTML Show and Hide li elements onClick

Question

I am having a problem with the appearance of the "Categories" and their subordinate lists.

The lists should not be displayed when loading the page. So only be visible by a click of the user. Unfortunately, these list items disappear immediately as soon as a checkbox is selected. That should not happen. The content under "Categories" should only disappear or be made visible when the word Categories is clicked.

What changes do I have to make to make this work as I imagine?

Here's the HTML of the container it's about:

<div class="cd-filter-block" value="Show Hide Elements" data-ng-click="ShowHideCategory()" >
    <h4 >Kategorien</h4>

    <ul class="cd-filter-content cd-filters list" ng-show="IsVisibleCategory">
        <li>
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Rind" data-ng-false-value="">
            <label class="checkbox-label"> Rind </label> 
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Geflügel" data-ng-false-value="">
            <label class="checkbox-label">Geflügel</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Schwein" data-ng-false-value="">
            <label class="checkbox-label">Schwein</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Schaf" data-ng-false-value="">
            <label class="checkbox-label">Schaf</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Wild" data-ng-false-value="">
            <label class="checkbox-label">Wild</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Ziege" data-ng-false-value="">
            <label class="checkbox-label">Ziege</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Pferd" data-ng-false-value="">
            <label class="checkbox-label">Pferd</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Alpaka" data-ng-false-value="">
            <label class="checkbox-label">Alpaka</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Fisch" data-ng-false-value="">
            <label class="checkbox-label">Fisch</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Kaninchen" data-ng-false-value="">
            <label class="checkbox-label">Kaninchen</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Mineral" data-ng-false-value="">
            <label class="checkbox-label">Mineralfutter</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Einzel" data-ng-false-value="">
            <label class="checkbox-label">Einzelfutter</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Spezial" data-ng-false-value="">
            <label class="checkbox-label">Spezialfutter</label>
        </li>
        <li class="reset">
            <p><strong><a href="" data-ng-click="resetFilters()" class="show-all"><i class="fa fa-undo" aria-hidden="true"></i> Filter zurücksetzen</a></strong></p>
        </li>                   
    </ul> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->

And here are the excerpts from the script file:

app.controller('PageCtrl', ['$scope', 'filterFilter', '$http', function ($scope, filterFilter, $http) { 
$scope.items =[];

$http.get("document.json").success(function(response){ 
    $scope.items = response;  //ajax request to fetch data into $scope.data
// pagination controls
    $scope.currentPage = 1;
    $scope.totalItems = $scope.items.length;
    $scope.entryLimit = 200; // items per page
    $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
    $scope.orderByField = 'evaluation_result';
    $scope.reverseSort = true;
    $scope.IsVisibleCategory = false;
    &scope.IsVisibleSubCategory = false;
    &scope.IsVisibleComposition = false;
    &scope.IsVisibleAnteile = false;
    $scope.ShowHideCategory = function () {
    //If DIV is visible it will be hidden and vice versa.
        $scope.IsVisibleCategory = $scope.IsVisibleCategory ? false : true;
    };
    $scope.ShowHideSubcategory = function () {
    //If DIV is visible it will be hidden and vice versa.
        $scope.IsVisibleSubcategory = $scope.IsVisibleSubcategory ? false : true;
    };
    $scope.ShowHideComposition = function () {
    //If DIV is visible it will be hidden and vice versa.
        $scope.IsVisibleComposition = $scope.IsVisibleComposition ? false : true;
    };
    $scope.ShowHideAnteile = function () {
    //If DIV is visible it will be hidden and vice versa.
        $scope.IsVisibleAnteile = $scope.IsVisibleAnteile ? false : true;
    };
});

Answer 1

The problem here is, that you set the ng-click on the containing div. So every click on a child, will trigger the ShowHideCategory() function.

Try moving the click handler to the actual word:

<div class="cd-filter-block" value="Show Hide Elements">
  <h4 data-ng-click="ShowHideCategory()">Kategorien</h4>
  [...]

Side note, not related to your question

In your ShowHide function, you could optimise your code a bit:

$scope.IsVisibleCategory = !$scope.IsVisibleCategory;