Selected Value of select tag does not change outside switch in angularjs

Question

If I put a select tag inside ng-switch then two way binding does not work for select tag ng-model outside ng-switch.

Please refer following code

<div ng-switch on="OutputStep">
                <div ng-switch-when="0">
                   Switch Step One
                </div>
                <div ng-switch-when="1">
                     Switch Step Two<br/>
                       <select ng-model="SelectedReviewOption" ng-options="review as review.DisplayValue for review in ReviewOptions">
                       </select>
                       Selected Value : {{SelectedReviewOption.DisplayValue}}             
                </div>                        
</div>
<button ng-click="OutputStep = '0'" ng-disabled="OutputStep == '0'">
Back
</button>
<button ng-click="OutputStep = '1'" ng-disabled="OutputStep == '1'">
Next
</button>
Selected Value Outside Switch : {{SelectedReviewOption.DisplayValue}}

In this fiddle, click Next button to view 2nd switch page. Change value in select tag. Observe that changed value cannot be displayed outside switch –

Answer 1

Use $parent.var_name in ng model , as ng switch creates it seperate scope , and the variable will be restricted to it if its not explicitly defined outside the scope by ng-init or something(in the controller)