ng-model for selectbox does not reflect changes in controller function

Question

I am having a problem with ng-model in select box using angularJs. The model value is not updated in controller function. However, It does reflect the changes in controller when the select box is placed in the main template but not when it is placed in a directive template.

Works fine in main.html

<select ng-model="selectedGuest" id="guests-sel"
    ng-change="doSearchByFilterDropdown($event, selectedGuest.key, 'guests')" 
    ng-options="guest as guest.value for guest in guests track by guest.key">
 </select>

This is main.html

<div ng-init="init()">
    <div class="content-wrapper">

        <div ng-if="selTemplate == 'tourism'">
            <!-- Does not work reflect changes when changedin this directive template -->
            <search-results-tourism></search-results-tourism>
        </div>
        <!--  Select Box ng-model value reflects in controller when placed here, 
           but not in directive template -->
        <select ng-model="selectedGuest" id="guests-sel"  ng-change="doSearchByFilterDropdown($event, selectedGuest.key, 'guests')" 
           ng-options="guest as guest.value for guest in guests track by guest.key">
       </select> 

    </div>
</div>

Does not work in directive template. Earlier I was using ng-include for the template but I thought It was because of the new scope created by ng-include so I replaced it with a directive but still not working any Idea. ?

This is the directive

<search-results-tourism></search-results-tourism>
 ...
.directive('searchResultsTourism', function () {
    return {
        restrict: 'E',
        scope: false,
        templateUrl : 'views/search-results-tourism.html'
    };

Calling the same select box in directive's template does not let ng-model value updates in controller

Answer 1

https://docs.angularjs.org/api/ng/directive/ngIf

ng-if is creating a new scope for your directive.

from the documentation :

Note that when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored. The scope created within ngIf inherits from its parent scope using prototypal inheritance. An important implication of this is if ngModel is used within ngIf to bind to a javascript primitive defined in the parent scope. In this case any modifications made to the variable within the child scope will override (hide) the value in the parent scope.