How to correctly present a controller for Angularjs?

Question

Angular

Everyone will accept!!!
Why is the controller not working? It has {{name}} and the button replaces {{name}} when clicked.
HTML:

{шапка, подключаем скрипты}
<div id="content" ng-app="GridSystem">
...
<div id="main-content" class="col-md-9" data-ng-controller="MyGrid">
<h2>Больше текста {{name}}!!!</h2>
<button class="btn btn-success btn-large" data-ng-click="addrow()">
</div>
....
</div>

JS:

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

GridS.controller('MyGrid', ['$scope', function MyGrid($scope) {
    $scope.name = '';
    $scope.addrow = function() {
        $scope.name = ' ТЕКСТА';
    };
}]);

UPD

angular.module('GridSystem', [])
  .controller('MyGrid', function($scope) {
    $scope.addrow = function() {
          $scope.name = ' ТЕКСТА';
      };
  });

here is the structure without error but it doesn't work, I don't understand what I'm doing wrong =\

Answer 1

You named the module GridSystem and the controller is trying to bind to the unknown module MyGrid

angular.module('GridSystem', [])
  .controller('GridSystem', function($scope) {
    $scope.addrow = function() {
          $scope.name = ' ТЕКСТА';
      };
  });

Answer 2

Your code is fully functional
How do you connect Angular? It must be connected before GridS is initialized.

Answer 3

Yes, sorry, I haven’t slept for a long time, I got confused a lot, I got stupid for about 20 minutes. There were mismatches with modules in html and in scripts.
May I have another question? I'm new to angular, is it possible to use ng-controller and switch-when and other variables in the same div? and also expose multiple controllers? Thank you