ng-template - angularjs:コントローラーのng-templateからスコープ変数の値を取得できません

Question

私のプロジェクトでは、angularjs を使用して webapp を開発し、次のようにプロジェクトで ng-template を使用します。

<script type="text/ng-template" id = "searchbox.html">
<div class="col-sm-2">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search"></span><input ng-model = "searchedCity" type="text" class="form-control" id="searchcity" placeholder = "Search City">
</div>
</div>
</script>

<div class="container">
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="control-label col-lg-2" for="candidatecity">Cities</label>
        <div class="col-lg-2">
            <select class="form-control" ng-options="city for city in avaiablecities" ng-model="selectedCity" id="candidatecity" ></select>
        </div>

        <div ng-if="selectedCity=='Others'" ng-include="'searchbox.html'"></div>        
        <label class="control-label col-lg-2" for="period">Time Period</label>
        <div class="col-lg-2">
            <select class="form-control"  ng-options="period for period in avaiableperiod" ng-model="selectedperiod" id="period"></select>
        </div>

        <div class="col-lg-2">
            <button type="submit" class="btn btn-default" ng-click="clickSendRequest()">Get Data</button>
        </div>
    </div>

</form>
</div>

都市コンボボックスにリストされているいくつかの都市があり、最後の都市は「その他」です。ターゲット都市がリスト内にない場合、ユーザーは によって制御される入力テキスト ボックスに都市を自分で入力する必要がありますng-if。そして、それは正常に動作します。

しかし問題は、検索ボックスのユーザー入力データを取得できないことです。ディレクティブを設定しng-model = "searchedCity"ましたが、次の JS コードでは、その値を取得できません。

MyApp.controller('MyCtrl', function($scope,$http) {


$scope.avaiablecities = ["Mexico City","Los Angeles", "Toronto", "Frankfurt", "Milan", "Mumbai", "Chicago", "Paris", "Beijing","Dubai","Sydney","Singapore","Hong Kong","Tokyo","New York","London","Amsterdam","Kuala Lumpur","Brussels","New Delhi","Johannesburg","Others"];
$scope.avaiableperiod = ["Past One Week", "Past One Month","Past One Quarter","Past One Year"];


$scope.clickSendRequest = function() {
    // send geocoding request to the API 

    console.log($scope.selectedCity);
    if ($scope.selectedCity == "Others") {
        console.log($scope.searchedCity);
    } else {
        console.log($scope.selectedCity);
    }   
};

}))

の出力console.log($scope.searchedCity)は未定義です。それで、問題は何ですか？

編集: 長時間のデバッグと、コントローラー間の通信に関する多くのグーグル検索の後。
<div ng-if="selectedCity=='Others'" ng-include="'searchbox.html'"></div>
上記のタグで根本的な原因を見つけ、ng-ifページng-includeで目的の効果を実現するために使用されます。しかし、それは angularjs にさらに懸念をもたらします。と の両方がより深いレベルまたはサブレベルng-ifを生成するためです。したがって、この場合、ng-template はメイン コントローラーの子の子です。解決策はです。したがって、次のようにしてください。うまく機能させることができますng-includescope$parent
ng-model = "$parent.$parent.searchedCity"