Ionic 1 accordion expanding ion-list

ionItemAccordion-directive.js

/*
 * This is my accordion for Ionic 1 please visit http://www.antoniogallo.it/
 */
 
angular.module('rootApp').directive('ionItemAccordion', function($log, $ionicScrollDelegate,$ionicPosition, $timeout) {
	return {
		restrict: 'E',
		replace: true,
		transclude: true,
		require: '^ionList',
		scope: {
			title: '@',
			iconClose: '@', 
			iconOpen: '@',
			iconAlign: '@'
		},		
		template: '<div><ion-item ng-class="classItem()" ng-click="toggleGroup()" ng-class="{active: isGroupShown()}" delegate-handle="{{title}}">'+
			'<i class="icon" ng-class="classGroup()"></i>'+
			'&nbsp;'+
			'{{title}}'+
			'</ion-item>'+
			'<ion-item class="item-accordion item-text-wrap" ng-show="isGroupShown()"><ng-transclude></ng-transclude></ion-item></div>',
		link: function (scope, element, attrs, ionList) {
			// link to parent
			if (!angular.isDefined(ionList.activeAccordion)) {
				ionList.activeAccordion=false;
			}
			if (angular.isDefined(ionList.counterAccordion)) {
				ionList.counterAccordion++;
			} else {
				ionList.counterAccordion=1;
			}
			scope.id = ionList.counterAccordion;

			// set defaults
			if (!angular.isDefined(scope.id)) $log.error('ID missing for ion-time-accordion');
			if (!angular.isString(scope.title)) $log.warn('Title missing for ion-time-accordion');
			if (!angular.isString(scope.iconClose)) scope.iconClose = 'ion-minus';
			if (!angular.isString(scope.iconOpen)) scope.iconOpen = 'ion-plus';
			if (!angular.isString(scope.iconAlign)) scope.iconAlign = 'left';

			scope.isGroupShown = function() {
				return (ionList.activeAccordion == scope.id);
			};

			scope.toggleGroup = function() {
				if (ionList.activeAccordion == scope.id) {
					ionList.activeAccordion = false;
				} else {
					ionList.activeAccordion = scope.id;											
				}				
				// Important... the animation open/close must be completed before using the scroll
				$timeout(function(){
					$ionicScrollDelegate.scrollTo(0, $ionicPosition.position(element).top ,true);						
				}, 300);
				
			};
		
			scope.classGroup = function() {
				return (ionList.activeAccordion == scope.id) ? scope.iconOpen : scope.iconClose;
			};			

			scope.classItem = function() {
				return 'item-stable item-accordion-title '+ (scope.iconAlign=='left' ? 'item-icon-left' : 'item-icon-right');
			};
		}

	};
});

ionItemAccordion-template.html

<ion-list>

	<ion-item-accordion title="ADDOMINOPLASTICA" icon-close="ion-ios-arrow-right" icon-open="ion-ios-arrow-down">
		<p>L’addominoplastica ...</p>
	</ion-item-accordion>

	<ion-item-accordion title="GINECOMASTIA" icon-close="ion-ios-arrow-right" icon-open="ion-ios-arrow-down">
		<p>La Ginecomastia ...</p>
	</ion-item-accordion>
	
</ion-list>