Making an if statement with currently selected option

I have the following drop-down list on my angular JS page:

<div class="col-md-4 fieldMargin">
<div class="dropdownIcon">
<select name="actions" id="actions"
ng-init="Data.formStatus.Action=Data.Actions[0]"
ng-options="option.Value for option in Data.Actions"
ng-focus="ActionsLabel = true" ng-blur="ActionsLabel = false;"
ng-model="Data.formStatus.Action"

></select>
<label for="actions" class="labelColor"
ng-class="{'dropdownLabelFloat' : (ActionsLabel || Data.formStatus.Action != null), 'dropdownLabel' : !ActionsLabel && !Data.formStatus.Action }">
Action
</label>
</div>
</div>


These are the options for the above drop-down:

Test1
Test12
Test14
Test18
Test25

and so on


Based on whatever selection, user makes, in the above, Action, drop-down list, I want to change the ng-model of another control on the same page:

this is another control:

<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to"
ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
ng-model="Data.EmailInput.To" />
<label for="to" class="labelColor"
ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
To
</label>
</div>



In the Action drop-down, if the user selects "Test1" then I want the ng-model to be:

Data.EmailInput.To


but if the user selects "Test18" or "Test25" from the Action drop-down then I want the ng-model to be:

Data.EmailInput.ToSpecialCase



<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to"
ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
ng-model="Data.EmailInput.ToSpecialCase" />
<label for="to" class="labelColor"
ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
To
</label>
</div>


Is it possible to do something on the angularJs HTML page.I tried doing something like this:

<div ng-if={{Data.formStatus.Action}} = "Test1" >

<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to"
ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
ng-model="Data.EmailInput.To" />
<label for="to" class="labelColor"
ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
To
</label>
</div>
</div>

<div ng-else-if="Test18" or "Test25">
<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to"
ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
ng-model="Data.EmailInput.ToSpecialCase" />
<label for="to" class="labelColor"
ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
To
</label>
</div>

</div>


so if the user selects "Test1" from the drop down then I want to display :

<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to"
ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
ng-model="Data.EmailInput.To" />
<label for="to" class="labelColor"
ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
To
</label>
</div>
</div>


else if the user selects "test18" or "test25" then I want to display:

<div>
<div class="col-md-12 inputEmailSection">
<input type="text" name="to" id="to"
ng-focus="ToLabel = true" ng-blur="ToLabel = false;"
ng-model="Data.EmailInput.ToSpecialCase" />
<label for="to" class="labelColor"
ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}">
To
</label>
</div>


I am very new to angularJs. Any help on this will be greatly appreciated.

Continue reading...