Angular adds ng-click to ng-repeat to control a div to show and hide, how to make it click on its own to show its own div below

problem description

the problem now is to control ng-show through ng-click, no matter which button is clicked, each div is displayed. How to click it to show its own div and other things are not displayed. I also wrote it through $index, but there are always questions. I hope you can answer it. The following code

related codes

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/angular.min.js"></script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.data = [
                {name:"aaaa",content:"",age:"24"},
                {name:"bbbb",content:"",age:"23"},
                {name:"cccc",content:"",age:"35"},
                {name:"dddd",content:"",age:"21"},
                {name:"eeee",content:"",age:"56"},
                {name:"ffff",content:"",age:"42"}
            ];
            
            $scope.show = function(){
                $scope.showHide =! $scope.showHide
            }

        })
    </script>
</head>
<body ng-controller="myCtrl">
    <ul>
        <li ng-repeat="data in data track by $index">
            <h2>{{data.name}}</h2>
            {{data.content}}
            <input type="button" value="" ng-click="show()">
            <div ng-show="showHide" style="width:300px;height:200px;border:1px solid -sharp000;"></div>
        </li>
    </ul>
</body>
</html>

what result do you expect? What is the error message actually seen?

Thank you!

<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/angular.min.js"></script> <script> var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.items = [ {name:"aaaa",content:"",age:"24",show:false}, {name:"bbbb",content:"",age:"23",show:false}, {name:"cccc",content:"",age:"35",show:false}, {name:"dddd",content:"",age:"21",show:false}, {name:"eeee",content:"",age:"56",show:false}, {name:"ffff",content:"",age:"42",show:false} ]; $scope.handleClick= function(item) { item.show = !item.show; } }) </script> </head> <body ng-controller="myCtrl"> <ul> <li ng-repeat="item in items track by $index"> <h2>{{item.name}}</h2> {{item.content}} <input type="button" value="" ng-click="handleClick(item)"> <div ng-show="item.show" style="width:300px;height:200px;border:1px solid -sharp000;"></div> </li> </ul> </body> </html>