What's wrong with my Ionic/Angular state inheritance?

ionic-v1
1

I’m new to Ionic and AngularJS so I’m struggling with (hopefully) something simple. I have these two states:

    .state('menu', {
			url: '/mobile/beer',
            controller: 'beerCtrl',
            templateUrl: 'templates/beer-menu.html'
	})
    .state('detail', {
            url: '/mobile/beer/:id',
            controller: 'beerDetailCtrl',
            templateUrl: 'templates/beer.html',
            resolve: {
               beer: function($stateParams, beerService) {
                  return beerService.findBeerById($stateParams.id) 
               }
            }
    })

The ‘menu’ state fetches all beers from a server and hand the list over to ‘beer-menu.html’ that contains an ion-list to display the list. When the user selects a beer in the list, the ‘detail’ states steps in to display more details about the beer.

It’s all working but I want to improve it a bit by using an abstract state:

    .state('beer', {
            abstract: true,
			url: '/mobile/beer'
		})
    .state('beer.menu', {
			url: '',
            controller: 'beerCtrl',
            templateUrl: 'templates/beer-menu.html'
		})
    .state('beer.detail', {
            url: '/:id',
            controller: 'beerDetailCtrl',
            templateUrl: 'templates/beer.html',
            resolve: {
               beer: function($stateParams, beerService) {
                 return beerService.findBeerById($stateParams.id) 
               }
           }
    })

It looks totally OK to me - esp because this is based on one of the ‘Formulas’ from the Ionic Framework website. Nevertheless the app stops working when I structure the states like that. I’ve tried to tweak it in various way but couldn’t get it working. Do you see what’s wrong?