title: How to update multiple dropdown value on change of another dropdown in AngularJS
body: <p>I have a table with multiple rows and each row has drop-down to select the value.  All the drop-down have same list. At first, All drop-downs have value selected as per JSON. But what I want to do is to have Another drop-down at the top of page and on change of its value, update all the drop-down values in table.
  I have created a AngularJS directive for dropdown. </p>
  
  <pre><code> app.directive('dropdown', function($timeout){
      return {
          restrict: 'A',
          require: 'ngModel',
          scope: {
              list: '=dropdown',
              ngModel: '='
          },
          templateUrl: '/dropdownView.html',
          replace: true,
          link: function(scope, elem, attrs, ngModel) {
              scope.height = elem[0].offsetHeight;
              scope.$watch('ngModel',function(){
                  scope.selected = ngModel.$modelValue;  
              });
              scope.update = function(rating) {
                  ngModel.$setViewValue(rating);
                  ngModel.$render(); 
              };
          }
      };
  });
  
  &lt;div dropdown="ratings" ng-model="list" &gt;&lt;/div&gt;
  </code></pre>
  
  <p>dropdownView.html</p>
  
  <pre><code>&lt;div class="dropdown" ng-click="open=!open" ng-class="{open:open}"&gt;
  &lt;div ng-repeat="rating in list" style="top: {{($index + 1) * height}}px; -webkit-transition-delay: {{(list.length - $index) * 0.03}}s; z-index: {{list.length - $index}}" ng-hide="!open" ng-click="update(rating)" ng-class="{selected:selected===rating}"&gt;
    &lt;span&gt;{{rating}}&lt;/span&gt;
  &lt;/div&gt;
  &lt;span class="title" style="top: 0px; z-index: {{list.length + 1}}"&gt;
    &lt;span&gt;{{selected}}&lt;/span&gt;
  &lt;/span&gt;
  &lt;span class="clickscreen" ng-hide="!open"&gt;&amp;nbsp;&lt;/span&gt;
  </code></pre>
  
  <p></p>
  
  <p>Please help me if someone knows any possible solution.</p>
  
  <p>Here's a <a href="https://plnkr.co/edit/FpxaRz9BlMUy3m9zqUS8" rel="nofollow noreferrer">plunker</a> created from my code </p>