未在选择标记下拉列表中选择以隐藏其他输入元素的嵌套控制器

我有嵌套控制器，我正在使用John Papa的风格指南，所以它们是控制器。一个控制整个表单以进行客户端验证和提交。另一个控制 HTML 视图的一部分，该部分处理位置，并且应该隐藏没有状态的小国家/地区的 STATE 输入，因此不应发生任何输入。

在选择标记中选择国家/地区。下拉列表是来自工厂的 JSON 翻译对象，英语选择有效。如果选择了某些国家/地区，则 STATE 输入应隐藏/消失。第一个问题是这不会发生。我假设用户单击下拉列表中的国家/地区超出了$digest并且必须$timeout（）插入它，但它仍然不起作用。我没有使用 ng-click，因为发生了 2 次点击 - 1 次打开选择，另一次进行选择。第二个相关的问题是 CountrySelected 在 SelectCountryController 中未定义，我不知道为什么。如果我对一个国家/地区进行硬编码，它都可以在页面加载时工作，但它从未适用于用户单击选择下拉列表中。

.HTML

<div name = "postApartment4Rent" data-ng-controller = "InputFormController as cntrl">
  <form id = "residenceInput" name = "residenceInput" data-ng-submit="cntrl.submit()" >
        <div id="countryAndState" data-ng-controller="SelectCountryController as vm">
        <div class="boldHeading">
            <p>TEST Language: {{ vm.langKey }} </p> 
            <p translate>COUNTRY</p>
            <select data-ng-model="vm.countrySelected"
                data-ng-init="vm.countrySelected = vm.countrySelected || vm.countries[0].code"
                data-ng-options="country.code as country.text group by country.continent for country in vm.countries" >
            </select>
        <p>TEST selected item is : {{vm.countrySelected}}</p>
        </div>
        <div id="stateProvince">
            <div id="stateDiv" data-ng-hide="vm.hideState">
                <p class="boldHeading" translate>STATE</p>
                <input type="text" id="state" name="state" data-ng-model="cntrl.input.state" size="50" maxlength="50" />
            </div>
        </div>
        </div>
  </form>
</div>

Angular/Javascript for the interior SelectCountryController

(function() { 'use strict';
  angular.module( 'residenceApp' ).controller( 'SelectCountryController', SelectCountryController ); //end of controller module
  SelectCountryController.$inject = [ '$translate', 'selectCountryTranslateFactory', '$timeout' ];

function SelectCountryController( $translate, selectCountryTranslateFactory, $timeout ) {
  var vm = this;        
  vm.langKey = {};
  vm.hideState = false;
  vm.countries = countries();
  vm.hideState = hideStateSelector();
function countries() {
  vm.langKey = $translate.use(); //use() as a getter
  return selectCountryTranslateFactory.withLangChoice( vm.langKey );
}
function hideStateSelector() {
  var countriesWithNoStates =[ "AI", "AG", "AW", "BS", "BB", "BM" ];
  if( countriesWithNoStates.indexOf( vm.countrySelected ) > -1 ) {
            $timeout(function() {
                vm.hideState = true;
                angular.element('stateDiv').trigger('click');
                return vm.hideState;
            }, 10); //end of $timeout
        }
  } //end of hideStateSelector function
} //end of controller function
})();

如果它有任何区别，所有这些都是部分视图。