FINAL

USE THIS ONE.

by acbabis

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-controller="accordionCtrl">
    <button accordion-trigger>Trigger 3!</button>
    <br/>
    <div class="accordion-content">
        <p>I am content 3!</p>
    </div>
    <button accordion-trigger>Trigger 3!</button>
    <br/>
    <div class="accordion-content">
        <p>I am content 3!</p>
    </div>
</div>
<hr>
<div ng-controller="accordionCtrl">
    <button accordion-trigger>Trigger 3!</button>
    <br/>
    <div class="accordion-content">
        <p>I am content 3!</p>
    </div>

JavaScript

var accordion = angular.module("accordion", []);

    accordion.factory('accordionFactory', function(){
        var msgs = [];
        var lastCb = null;
        var readMessages = function(cb){
                msgs.push(cb);
        }
        var newMessage = function(msg){
            for (var cb in msgs){
                msgs[cb](msg);
            }
        }
        return { 
            readMessages: readMessages,
            newMessage: newMessage
        }
    });

    accordion.controller("accordionCtrl", function($scope, accordionFactory){        
        $scope.showContent = false;        
    });

    accordion.directive("accordionContent", function(accordionFactory){
        var seedId = 0;
        return {
            restrict: 'EAC',
            scope: false,
            controller: "accordionCtrl",
            controllerAs: "ctrl",
            link: function(scope, element, attrs){
                var uID = seedId++; 
                element.css({display: "none"});
                
                function toggleThisDirective(data){
                    var elemStatus = element.css("display");
                    if(scope.showContent && data.targetElementId == uID && elemStatus == "block")
                        element.css({display: "none"});
                    else if(data.targetElementId == uID)
                        element.css({display: "block"});
                    else
                        element.css({display: "none"}); 
                }
                
                accordionFactory.readMessages(function(msg){
                    toggleThisDirective({"targetElementId": msg.targetId});
                });
            }
        }
    });

    accordion.directive("accordionTrigger", function(accordionFactory){
        var seedId = 0;
        return {
            restrict: 'EAC', 
            scope: false,
            controller: "accordionCtrl",
            link: function(scope, element, attrs){
                var specific =...