One directive used several times: How to change an attribute of all these directives from within one?

I have an angular directive called 'clickForOptions' which basically does following:

When the element is clicked, the element's attribute attribute 'optionButtons' is toggled between hidden/show

if (attrs.optionButtons == 'show') {
    attrs.$set('optionButtons', 'hidden');
} else {
    attrs.$set('optionButtons', 'show');
}

Via $observe, the directive watches for that change and either performs a css translate to the left or back to default position.

attrs.$observe('optionButtons', function(value){
    if (value == 'show') {
        showOptions();
    } else {
        hideOptions();
    }
});

This directive is then used on multiple items in a list. Codepen example: http://codepen.io/flavordaaave/pen/EaKgoa

Now I want to extend the logic so that if one of the elements is clicked to open, I want to close a potentially other opened element.

One solution I played with is using a parent Directive that has a function to broadcast an event to close and then in the child directive have a listener for that event to trigger the close, but besides this seems overcomplicated it does not work correctly because the closing interferes with the opening of the clicked element...

See another codepen example: http://codepen.io/flavordaaave/pen/jEqMpd

Update: I managed to get it working with my broadcast approach using a "clicked" variable that is set to true as soon as the user clicked and set to false when the animation is done to exclude the clicked element from the closing method. But as already mentioned, this seems pretty wrong... http://codepen.io/flavordaaave/pen/emZdwN