var myApp = angular.module('MyApp', []);
myApp.controller('myCtrl', ['$scope', function($scope){$scope.isReverse = false;$scope.menuItems = [{title : "This first",content : "This first content"　　    },{title : "This second",content : "This second content"　　    },{title : "This third",content : "This third content"　　    }];
}]);
myApp.directive('accroding',function(){return {controller: function($scope, $element, $attrs, $transclude) {var tabItems = [];this.getOpen = function(selectedItem){angular.forEach(tabItems, function(value, key){if(value != selectedItem){value.isOpen = false;}});}this.addItem = function(tabItem){tabItems.push(tabItem);}},restrict: 'EA', template: '<div ng-transclude></div>',replace: true,transclude: true,        link: function($scope, iElm, iAttrs, controller) {}};
});
myApp.directive('expender', [function(){return {scope: {title : '=expenderTitle',isReverse : '=expenderIsreverse',}, require: '^accroding', restrict: 'EA', template: '<div>'+'<div ng-click="toggle()">{{title}} || isReverse:{{isReverse}}</div>'+'<div ng-show="isOpen" ng-transclude></div>'+'</div>',replace: true,transclude: true,link: function($scope, iElm, iAttrs, controller) {$scope.isOpen = false;controller.addItem($scope);$scope.toggle = function(){$scope.isOpen = !$scope.isOpen;controller.getOpen($scope);$scope.isReverse = !$scope.isReverse;                }}};
}]);

<accroding><expender ng-repeat="item in menuItems" expender-title="item.title" expender-isreverse="order.isReverse">{{item.content}}</expender></accroding><br><div ng-repeat="item in menuItems">{{item.content}} | {{item.title}} || {{isReverse}} </div>

var myApp = angular.module('MyApp', []);
myApp.controller('myCtrl', ['$scope', function($scope){$scope.order = {isReverse : "false",predicate : "2"};$scope.menuItems = [{title : "This first",content : "This first content"　　    },{title : "This second",content : "This second content"　　    },{title : "This third",content : "This third content"　　    }];
}]);
myApp.directive('accroding',function(){return {controller: function($scope, $element, $attrs, $transclude) {var tabItems = [];this.getOpen = function(selectedItem){angular.forEach(tabItems, function(value, key){if(value != selectedItem){value.isOpen = false;}});}this.addItem = function(tabItem){tabItems.push(tabItem);}},restrict: 'EA',template: '<div ng-transclude></div>',replace: true,transclude: true,link: function($scope, iElm, iAttrs, controller) {}};
});
myApp.directive('expender', [function(){// Runs during compilereturn {scope: {title : '=expenderTitle',isReverse : '=expenderIsreverse',predicate : '=expenderPredicate',}, require: '^accroding',restrict: 'EA', template: '<div>'+'<div ng-click="toggle()">{{title}} {{isReverse}} {{predicate}}</div>'+'<div ng-show="isOpen" ng-transclude></div>'+'</div>',replace: true,transclude: true,link: function($scope, iElm, iAttrs, controller) {$scope.isOpen = false;controller.addItem($scope);$scope.toggle = function(){$scope.isOpen = !$scope.isOpen;controller.getOpen($scope);$scope.isReverse = !$scope.isReverse;$scope.predicate = "22";}}};
}]);

<accroding><expender ng-repeat="item in menuItems" expender-title="item.title" expender-isreverse="order.isReverse" expender-predicate="order.predicate">{{item.content}}</expender></accroding><div ng-repeat="item in menuItems">{{item.content}} | {{item.title}} || {{order.isReverse}} || {{order.predicate}}</div>