Injection error in angularjs?

there is nothing wrong with the module name and the controller name. Why did you report an error? I tried for a long time but failed to solve it. There is a rookie at the front end. Please give me a lot of advice.

as shown in the figure, the page reports an error like this:

HTML:

JS:

HTML source code:

<!DOCTYPE html>
<html lang="en" ng-app="MyModule">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/angular1.5.0.min.js"></script>
    <script src="js/scopeBind.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
    <drink flavor="{{ctrlFlavor}}"></drink>
</div>
</body>
</html>

JS source code:

var MyModule = angular.module("MyModule", []);
MyModule.controller("MyCtrl", ["scope",
    function ($scope) {
        $scope.ctrlFlavor = "";
    }
])
MyModule.directive("drink", function () {
    return {
        restrict: "AE",
        template: "<div>{{flavor}}</div>",
        link: function (scope, element, attrs) {
            scope.flavor = attrs.flavor;
        }
    }
})

Front-end angularjs

Feb.28,2021

spelling error, code is fine

MyModule.controller("MyCtrl", ["$scope",
    function ($scope) {
        $scope.ctrlFlavor = "";
    }
])

Controller dependency injection is wrong. You write scope, and angular contains $scope, so you can't find this service and report an error.

MyModule.controller ('MyCtrl', function ($scope) {

        $scope.ctrlFlavor = "";

});

The injections of

angularjs1 are all $scope,. Only if you want to pass the current scope to another method, you can change it to scope according to the corresponding arguments and parameters

Previous: Switch routes, the timer on the previous page is still running

Next: The home page of many websites have such a positioning floating module, what is the general name of this?