AngularJS: Calling custom directives from within a custom directive doesn't seem to work

I have a plunker here that demostrates it.

I can create two directives. In this case one is named zMonthSelect, and the other is named zTest that references zMonthSelect. Angular doesn't seem to like if they're nested. Why is that? What can I do to fix it?

Here's the code:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
});

app.directive('zMonthSelect', function () {
    return {
        restrict: 'E',
        priority: 1000,
        scope: {
            month: '=month'
        },
        template: '<select ng-model="month">' +
            '<option value="1">Jan</option>' +
            '<option value="2">Feb</option>' +
            '<option value="3">Mar</option>' +
            '<option value="4">Apr</option>' +
            '<option value="5">May</option>' +
            '<option value="6">Jun</option>' +
            '<option value="7">Jul</option>' +
            '<option value="8">Aug</option>' +
            '<option value="9">Sep</option>' +
            '<option value="10">Oct</option>' +
            '<option value="11">Nov</option>' +
            '<option value="12">Dec</option>' +
            '</select>',
        controller: function($scope) {
        }
    };
});


app.directive('zTest', function(){ 
  return { 
    restrict: 'E',
    priority: 1,
    scope: {},
    template: 'Test: <z-month-list month="1"></z-month-list>',
    controller: function($scope) {
    }
  };
});

and the HTML:

<body ng-controller="MainCtrl">
  zTest: <z-test></z-test><br/>
  zMonthSelect: <z-month-select></z-month-select><br/>
</body>

You have a mismatch in your directive name. In the zTest directive you're trying to use <z-month-list>, but your directive is named zMonthSelect. Just change your zTest directive to us <z-month-select>. See http://plnkr.co/edit/x2i8lv?p=preview

Or you can rename your inner directive to zMonthList. See http://plnkr.co/edit/aQlSqK?p=preview