javascript - Accessing Isolated Scope of Sibling resulted from same angular directive -

i have angularjs directive produce multi select drop down complicated template. directives having isolated scope. based on dropdown click variable named open in dropdown toggling , visibility adjusted. currenly dropdown closing when dom clicked. if user clicking 2 dropdowns 1 after other, both remains open. can close, sibling dropdown, accessing scope , setting value open. how can access isolated scope of sibling originated same directive ?

var directivemodule = angular.module('angular-drp-multiselect', []); directivemodule.directive('ngdropdownmultiselect', ['$filter', '$document', '$compile', '$parse', function ($filter, $document, $compile, $parse) {      return {         restrict: 'ae',         scope: {             selectedmodel: '=',             options: '=',             extrasettings: '=',             events: '=',             searchfilter: '=?',             translationtexts: '=',             groupby: '@'                         },         template: function (element, attrs) {             var checkboxes = attrs.checkboxes ? true : false;             var groups = attrs.groupby ? true : false;              var template = '<div class="multiselect-parent btn-group dropdown-multiselect btn-block ">';             template += '<button type="button" ng-disabled="getdisablestatus()" class="dropdown-toggle btn-block btn-leftalign" ng-class="settings.buttonclasses" ng-click="hideallopendropdowns();toggledropdown($event)" ng-attr-title="{{getbuttontitle()}}">{{getbuttontext()}}&nbsp;<span class="caret"></span></button>';             template += '<ul class="dropdown-menu dropdown-menu-form" ng-data="{{open}}"  ng-style="{display: open ? \'block\' : \'none\', height : settings.scrollable ? settings.scrollableheight : \'auto\' }" style="overflow: scroll" >';             template += '<li ng-hide="!settings.showcheckall || settings.selectionlimit > 0"><a data-ng-click="selectall()">  {{texts.checkall}}</a>';            .....             element.html(template);         },         link: function ($scope, $element, $attrs) {             var $dropdowntrigger = $element.children()[0];              $scope.toggledropdown = function () {             //here need access siblings(generated same directive) scope , control visibility, setting value $scope.open             //i tried following things             --------------------------------------             //attempt 1- not working             angular.foreach(angular.element($element.parent().parent().children()), function (value, key) {                 var x = angular.element(value).scope();                     x.open = false;                      //x.$apply(function () {                         // x.open = false;                      //});                      }             //attempt  2- not working             angular.foreach(angular.element($(".multiselect-parent")), function (value, key) {                  var menuelem = angular.element(value);                 var menuelemscope = menuelem.scope();                 menuelemscope.$apply(function () {                     menuelemscope.open = false;                 });             });               --------------------------------------               $scope.open = !$scope.open;             };             ...             ... 

the html is

<div ng-app="multiselectapp">         <div ng-controller="multiselect">          <div ng-dropdown-multiselect=""              extra-settings="dropdownsettings1" >         </div>          <div ng-dropdown-multiselect=""              extra-settings="dropdownsettings2" >         </div>          <div ng-dropdown-multiselect=""              extra-settings="dropdownsettings3" >         </div>          </div>          </div> 

i find searching dom elements affect sibling directive not angular way.

you can this

link: function(element, attrs){     ....     $rootscope.$on('openchanged', function(event, open){         scope.isopen = open;     });     scope.toggleopen = function(){         var wasopen = scope.isopen;         $rootscope.$broadcast('openchanged', false);         scope.isopen = !wasopen;     } 

however big app suggest implement service communication instead of using $rootscope.

fiddle example

update
regarding service implementation.
advise not reinvent wheel , use https://www.npmjs.com/package/angular-event-emitter.

however, there quick solution implement smth

.factory('broadcastservice', function () {     var handlers = {};     this.on = function (eventname, callback) {         var callbacks = handlers[eventname];         if (!callbacks) {             handlers[eventname] = callbacks = [];         }         if (typeof callback === 'function' && callbacks.indexof(callback) < 0) {             callbacks.push(callback);         }     };     this.broadcast = function (eventname, args) {         var callbacks = handlers[eventname];         if (callbacks) {             callbacks.map(function (handler) {                 try {                     handler({                         name: eventname                     }, args);                 } catch (ex) {                     console.error(ex);                 }             });         }     } })