Выпадающее меню, изменяющее текст в другом div

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="dominant" ng-controller="Ctrldominant">

<select ng-model="dominantie">
<option ng-repeat="x in dominantie1" value="{{x.model}}">{{x.model}}</option>
</select>

<p><span id="dominantie-p">{{dominantie}}</span></p>

</div>

<script>
var app = angular.module('dominant', []);
app.controller('Ctrldominant', function($scope) {
    $scope.dominantie1 = [
        {model : "Rechts-dominant"},
        {model : "Links-dominant"},
        {model : "Co-dominant"}
    ];
});
</script>

Ответ 1 · Saravanan Sachi

Вы должны указать Controller для родительского элемента. Поскольку директива контроллера добавлена ​​к <body>, она применима к обоим div.

<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   </head>
   <body ng-app="dominant" ng-controller="Ctrldominant">
      <div>
         <select ng-model="dominantie">
            <option ng-repeat="x in dominantie1" value="{{x.model}}">{{x.model}}</option>
         </select>
         <select ng-model="dominantie2">
            <option ng-repeat="x in dominantie1" value="{{x.model}}" >{{x.model}}</option>
         </select>
         <p><span id="dominantie-p">{{dominantie}}</span></p>
      </div>
      <div>
         <p>Second Div:
            <span id="dominantie-d">{{dominantie}}</span>
            {{dominantie2}}
         </p>
      </div>
      <script>
         var app = angular.module('dominant', []);
         app.controller('Ctrldominant', function($scope) {
            $scope.dominantie1 = [
                {model : "Rechts-dominant"},
                {model : "Links-dominant"},
                {model : "Co-dominant"}
            ];
          });
      </script>
    </body>
</html>