How to store the selected items in a "Select" field in a model?

Question

I want to display the selected items in a label or list.

I am using switch to switch between form and result. Please see the code below

<div ng-switch on="format">  
   <div ng-switch-when="form">
     <div class="floatLeft">Seeeeeelect</div>
      <select multiple="multiple" ng-model="test">
        <!--<option value ="sdfsdf" ng-repeat="n in ['a','b','c']">{{n}}</option>-->
        <option value ="AAA">AAA</option>
        <option value ="BBB">BBB</option>
        <option value ="CCC">CCC</option>
      </select>
      {{test}}
   </div>
   <div ng-switch-when="result">{{test}}</div>
 </div>

<button ng-click="showForm()">Form</button>
<button ng-click="showPreview()">Result</button>

In controller i have the method like below,

    $scope.showPreview=function() {
    $scope.format='result';

  };

      $scope.showForm=function() {
        $scope.format='form';
      };

After selecting the items in list, when i try to switch to see the "result" by tapping "Result" button. The selected item is not populating.

Can anyone tell me where i went wrong.

Thanks

Answer 1

The ng-switch creates sub-scopes. So you have to reference test by $parent.test.

<select multiple="multiple" ng-model="$parent.test">


<div ng-switch-when="result">{{ $parent.test }}</div>


  </select>
    {{ $parent.test }}
</div>

fiddle