Несколько приложений и контроллеров в одном файле

В этом коде AngularJS:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.angularjs.org/1.2.9/angular.min.js" type="text/javascript"></script>
  <script>
    var app1 = angular.module('app1', []);

    app1.controller('Ctrl1', function ($scope)
    {
      $scope.name = "Jack";
    });

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

    app2.controller('Ctrl2', function ($scope)
    {
      $scope.name = "Steve";
    });

  </script>
  <title>Test Controllers</title>
</head>
<body>
  <div ng-app="app1">
    <div ng-controller="Ctrl1">
      <span>{{name}}</span>
    </div>
  </div>
  <div ng-app="app2">
    <div ng-controller="Ctrl2">
      <span>{{name}}</span>
    </div>
  </div>
</body>
</html>

У меня есть два ng-приложения и два контроллера. Но работает только первый. Имя Джек показано, но Стив нет. Почему?

Ответ 1

JSFiddle, показывающий проблему, находится здесь: http://jsfiddle.net/DEnB2/

Автоматическая инициализация директивы ng-app происходит только один раз, но вы можете вручную инициализировать дополнительные модули с помощью метода начальной загрузки. (См.: https://docs.angularjs.org/guide/bootstrap)

JSFiddle с решением находится здесь: http://jsfiddle.net/DEnB2/5/

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.angularjs.org/1.2.9/angular.min.js" type="text/javascript"></script>
  <script>
    var app1 = angular.module('app1', []);

    app1.controller('Ctrl1', function ($scope)
    {
      $scope.name = "Jack";
    });

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

    app2.controller('Ctrl2', function ($scope)
    {
      $scope.name = "Steve";
    });

    angular.element(document).ready(function() {
      angular.bootstrap(document.getElementById('app2'), ['app2']);
    });   
  </script>
  <title>Test Controllers</title>
</head>
<body>
  <div ng-app="app1">
    <div ng-controller="Ctrl1">
      <span>{{name}}</span>
    </div>
  </div>
  <div id="app2">
    <div ng-controller="Ctrl2">
      <span>{{name}}</span>
    </div>
  </div>
</body>
</html>

Ответ 2

Понял, что понимает только одно постоянное приложение. Вот вам альтернатива для работы над двумя контроллерами. Я хотел бы знать, зачем вам нужно приложение с двумя приложениями?

<head>
    <script src="http://code.angularjs.org/1.2.9/angular.min.js" type="text/javascript"></script>
    <script>
        var app1 = angular.module('app1', []);

        app1.controller('Ctrl1', function ($scope)
        {
            $scope.name = "Jack";
        });

        app1.controller('Ctrl2', function ($scope)
        {
            $scope.name = "Steve";
        });

    </script>
    <title>Test Controllers</title>
</head>
<body ng-app="app1">

    <div ng-controller="Ctrl1">
        <span>{{name}}</span>
    </div>


    <div ng-controller="Ctrl2">
        <span>{{name}}</span>
    </div>

</body>