Показать div при выборе опции из выпадающего списка. - Ionic

Question

Когда я запустил этот код, он должен показать второй div при выборе опции из первого раскрывающегося списка, аналогично выбрав опцию для второго раскрывающегося списка. 3-й div должен быть показан. Но третий div не отображается при выборе значения из второго выпадающего списка. Что я должен сделать, чтобы он работал. Я использую только AngularJs, а не JQuery.

Html код:

<div class="well"> 
    <div class="form-group"> 
    <select class="form-control" id="sel1" ng-model="Lang1" ng-change="changeMe()"> 
     <option ng-option value="1">Language 1</option> 
     <option ng-option value="1">Language 2</option> 
     <option ng-option value="1">Language 3</option> 
    </select> 
    </div> 
     <ion-list> 
      <ion-checkbox >Read</ion-checkbox> 
      <ion-checkbox >Write</ion-checkbox> 
      <ion-checkbox >Speak</ion-checkbox> 
     </ion-list> 
</div> 

    <div class="well" ng-if="Lang1 == '1'"> 
    <div class="form-group"> 
    <select class="form-control" id="sel2" ng-model="Lang2" ng-change="changeMe()"> 
     <option ng-option value="2">Language 1</option> 
     <option ng-option value="2">Language 2</option> 
     <option ng-option value="2">Language 3</option> 
    </select> 
    </div> 
     <ion-list> 
      <ion-checkbox >Read</ion-checkbox> 
      <ion-checkbox >Write</ion-checkbox> 
      <ion-checkbox >Speak</ion-checkbox> 
     </ion-list> 
</div> 

    <div class="well" ng-if="Lang2 == '2'"> 
    <div class="form-group"> 
    <select class="form-control" id="sel3"> 
     <option>Language 1</option> 
     <option>Language 2</option> 
     <option>Language 3</option> 
    </select> 
    </div> 
    <ion-list> 
     <ion-checkbox >Read</ion-checkbox> 
     <ion-checkbox >Write</ion-checkbox> 
     <ion-checkbox >Speak</ion-checkbox> 
    </ion-list> 
</div> 
</div> 

код расслоение плотной:

$scope.changeMe = function(){ 
     alert(changed); 
}; 

Answer 1

Вот ваш рабочий код.

Я заменил ng-if на ng-show, потому что ng-if удаляет код, который не требуется от DOM, и угловой теряет на нем наблюдателей. В отличие от ng-show, который находится в DOM, но не отображается, но имеет угловой запуск init.

<div ng-app="myApp" ng-controller="MyController"> 
    <div class="well"> 
    <div class="form-group"> 
     <select class="form-control" id="sel1" ng-model="Lang1" ng-change="changeMe()"> 
     <option ng-option value="1">Language 1</option> 
     <option ng-option value="1">Language 2</option> 
     <option ng-option value="1">Language 3</option> 
     </select> 
    </div> 
    <ion-list> 
     <ion-checkbox>Read</ion-checkbox> 
     <ion-checkbox>Write</ion-checkbox> 
     <ion-checkbox>Speak</ion-checkbox> 
    </ion-list> 
    </div> 

    <div class="well" ng-show="Lang1 == '1'"> 
    <div class="form-group"> 
     <select class="form-control" id="sel2" ng-model="Lang2" ng-change="changeMe()"> 
     <option ng-option value="2">Language 1</option> 
     <option ng-option value="2">Language 2</option> 
     <option ng-option value="2">Language 3</option> 
     </select> 
    </div> 
    <ion-list> 
     <ion-checkbox>Read</ion-checkbox> 
     <ion-checkbox>Write</ion-checkbox> 
     <ion-checkbox>Speak</ion-checkbox> 
    </ion-list> 
    </div> 

    <div class="well" ng-show="Lang2 == '2'"> 
    <div class="form-group"> 
     <select class="form-control" id="sel3" ng-model="Lang3" ng-change="changeMe()"> 
     <option>Language 1</option> 
     <option>Language 2</option> 
     <option>Language 3</option> 
     </select> 
    </div> 
    <ion-list> 
     <ion-checkbox>Read</ion-checkbox> 
     <ion-checkbox>Write</ion-checkbox> 
     <ion-checkbox>Speak</ion-checkbox> 
    </ion-list> 
    </div> 
</div> 

WORKING DEMO

Надеется, что это помогает.