Collapse list not showing child on parent click

Ionic Framework ionic-v3
1

I’m trying to make a expandable-list in Ionic. This is the example that I’m trying to follow:
[Click Me!][1]

I can see the groups and each group have their child (I debugged). The problem when I click over the group of the listview the group never expand. This is my controller (I’m not using $scope like the tutorial because I thinks is not necessary, but if I’m wrong please tell me how use it because I’m new with that).

(function() {
'use strict';

angular
    .module('example.cancha')
    .controller('CanchaController', CanchaController);

CanchaController.$inject = ['$state', 'canchaService'];

function CanchaController($state, canchaService) {
    var vm = angular.extend(this, {
        canchasComplejo: []
        });
    


    (function activate() {
        cargarCanchasComplejo();
    })();

    //funcion que llama al servicio para obtener las canchas del complejo
    function cargarCanchasComplejo() {
        canchaService.obtenerCanchasComplejo()
            .then(function(canchasComplejo) {
                vm.canchasComplejo = canchasComplejo;
            
             for (var i=0; i<vm.canchasComplejo.length; i++) {
                vm.canchasComplejo[i] = {
                  name: i,
                  items: ['Informacion, Habilitado, Agenda'],
                  show: false
                };
                
              }
        });
    }
    
    function toggleGroup(group){
        if (this.isGroupShown(group)) {
            this.shownGroup = null;
        } 
        else {
            this.shownGroup = group;
        }
    }
    
    function isGroupShown(group) {
        return this.shownGroup === group;
    };
    
}
})();

I put a breakpoint into ‘toggleGroup’ function but when I click on the group never call it (I don’t know why)

This is my HTML code:

<ion-view view-title="¡Bienvenido!">
<ion-content>
	<div ng-repeat="e in vm.categoriasComplejo" ng-if="$index%2==0" class="row colums-two">
		<div class="card col home">
			<a class="item item-text-wrap" ng-click="vm.mostrarCanchas(vm.categoriasComplejo[$index])"">
				<h1><i class="{{vm.categoriasComplejo[$index].icono}}"></i></h1>
				<h2>{{vm.categoriasComplejo[$index].titulo}}</h2>
			</a>
		</div>

		<div class="card col home" ng-if="!!vm.categoriasComplejo[$index + 1]">
			<a class="item item-text-wrap" ng-click="vm.mostrarCanchas(vm.categoriasComplejo[$index + 1])">
				<h1><i class="{{vm.categoriasComplejo[$index + 1].icono}}"></i></h1>
				<h2>{{vm.categoriasComplejo[$index + 1].titulo}}</h2>
			</a>
		</div>
	</div>
</ion-content>
</ion-view>

So I want to know… Why The group never expand when i click over it?
I’s not problem the array with groups because I can see that vm.canchasComplejo have their group and each group have their items

Thanks!
[1]: https://codepen.io/shengoo/pen/bNbvdO/