AngularJS : Problem while using ng-controller

Problem with ng-controller : Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl

I'm beginner in AngularJS, i'm facing a problem while using ng-controller : this is my code :

<html>
<head>
    <title></title>
</head>
<body ng-app>

<div ng-controller="ListDataCtrl">
<div ng-repeat="item in listData">
        <p><strong>{{item.name  | uppercase}}</strong></p>
        <p>{{item.country}}</p>
        <p>*********************</p>
    </div>  
</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

<script>
    function ListDataCtrl($scope){

        $scope.listData =[
        {"name":"Achraf", "country":"Tunisia"},
        {"name":"Maher", "country":"UAE"},
        {"name":"Ahmed", "country":"USA"},
        {"name":"Issam", "country":"France"}
        ];
    }
</script>


</body>
</html>

the error message is : angular.js:15567 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl

Solution

The error indicated that controller is not registered:

The controller with the name 'ListDataCtrl' is not registered.

From AngularJS version 1.3 you have to register your controllers with modules rather than exposing them as globals: documentation

First of all you need to declare an angularJS module for the app , and then register the controller to that module as below:

<body ng-app="myApp">

In script, app declaration:

var myApp = angular.module('myApp', []);

controller setup:

myApp.controller('ListDataCtrl', ['$scope', function($scope) {
...
}