angularjs – 自定义指令模型在ng-switch中不起作用

我正在尝试使用AngularJS来提供一个可切换的下拉列表,其中各种选项的选择将触发不同的列表. ng-switch似乎是正确的方法,但我的ng-model在ng-switch内部没有绑定.如果我不使用ng-switch,绑定工作正常,但如果是这种情况,我不知道如何切换我的下拉列表.这可能是什么问题？

jsFiddle：http://jsfiddle.net/tanweihao88/LUzXT/3/

HTML：

<select ng-model="periodRangeModel" ng-options="item for item in items"></select>
<div ng-switch on="periodRangeModel">
    <span ng-switch-when="Month"><period-selector items="monthOptions" ng-model="periodModel"></period-selector></span>
    <span ng-switch-when="Quarter"><period-selector items="quarterOptions" ng-model="periodModel"></period-selector></span>
    <br>
</div>

JS：

angular.module('myApp',[])
.controller("MyCtrl",function($scope) {
    $scope.items = ['Month','Quarter'];
    $scope.periodRangeModel = "Month";
    $scope.quarterOptions = ["Jan-Mar","Apr-Jun","Jul-Sept","Oct-Dec"];
    $scope.monthOptions = ["January","February","March","April","May","June","July","August","September","October","November","December"];
    $scope.periodModel = $scope.monthOptions[0];
})
.directive('periodSelector',function() {
    return {
        restrict: 'E',replace: true,scope: { items: '=',ngModel: '='},template: "<span><select ng-options='period for period in items' ng-model='ngModel'></select></span>"
    }
});

$scope.periodModel = {
    value: $scope.monthOptions[0]
};

<period-selector items="monthOptions" ng-model="periodModel.value"></period-selector>

Model: {{periodModel.value}} (this is supposed to change)