title: Custom directive models do not work in ng-switch
body: <p>I am trying to use AngularJS to provide a toggable dropdown list, where the selection of various options will trigger different lists. <code>ng-switch</code> seemed like the right way to do it, but my <code>ng-model</code> is not binding while inside the <code>ng-switch</code>. The binding works fine if I do not use <code>ng-switch</code>, but I do not know how to toggle my dropdown lists if that's the case. What could be the issue here?</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/tanweihao88/LUzXT/3/" rel="nofollow">http://jsfiddle.net/tanweihao88/LUzXT/3/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select ng-model="periodRangeModel" ng-options="item for item in items"&gt;&lt;/select&gt;
  &lt;div ng-switch on="periodRangeModel"&gt;
      &lt;span ng-switch-when="Month"&gt;&lt;period-selector items="monthOptions" ng-model="periodModel"&gt;&lt;/period-selector&gt;&lt;/span&gt;
      &lt;span ng-switch-when="Quarter"&gt;&lt;period-selector items="quarterOptions" ng-model="periodModel"&gt;&lt;/period-selector&gt;&lt;/span&gt;
      &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>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: "&lt;span&gt;&lt;select ng-options='period for period in items' ng-model='ngModel'&gt;&lt;/select&gt;&lt;/span&gt;"
      }
  });
  </code></pre>