В angularjs ui-bootstrap как я могу установить начальную опцию в состояниях начальной загрузки и избежать '? undefined:undefined?' вариант?

Question

Я пытаюсь решить старую проблему angularjs, которая на самом деле является ожидаемым: "Добавление ng-модели в предопределенный элемент Select добавляет неопределенный параметр" ( https://github.com/angular/angular.js/issues/1019),

Я работаю с ng 1.4.9, ui-bootstrap, ui-router и пытаюсь использовать "bootstrap-formhelpers-states" для списка выбора состояний. У меня есть jQuery в проекте для поддержки FullCalendar, для которого у меня есть директива ng, но я стараюсь не использовать его ни для чего другого.

Я могу заставить список состояний работать без необходимости загружать js начальной загрузки, но я не получаю привязку к Model для корректной работы над init, с чем у многих людей возникают проблемы.

Из этого вопроса ( почему представление angularJS нарушает Bootstrap Formhelper) я получил директиву для стран и адаптировал ее для государств:

angular.module("myApp").directive('statepicker', function ($parse) {
    return {
        restrict: 'A', // It is an attribute
        require: '?ngModel', // It uses ng-model binding
        scope: {
          ngModel: '='
        },
        link: function (scope, elem, attrs, ctrl) {
            // Add the required classes
            elem.addClass('bfh-states'); 
            // First we initialize the selec with the desired options
            elem.select({
                filter: (elem.attr('data-filter') == 'true') ? true : false
            }).on('change', function() {
                // Listen for the change event and update the bound model
                return scope.$apply(function () {
                    return scope.ngModel = elem.val();
                });
            });
            scope.$watch('ngModel', function (newVal, oldVal) {
                if (newVal != oldVal) {
                    elem.val(newVal);
            });
            // Initialize the states with the desired options
            return elem.bfhstates({
                flags: (elem.attr('data-flags') == 'true') ? true : false,
                country: 'US',
                state: scope.ngModel || 'CA',
                blank: false
            });
        }
    };
});

Поэтому, если я не добавляю 'ng-model' к элементу 'select', он инициализирует OK значением из параметров директивы (CA), но с привязкой модели это не делает; что-то делать с этим не является допустимым вариантом в списке (но это так). Проблема в том, что когда я редактирую существующий адрес, я хочу, чтобы список устанавливался из значения переменной модели, но когда он задан с помощью параметров начальной директивы, он не изменяется.

HTML:

<select statepicker id="stateList" name="state" class="form-control" ng-model="state" ng-init="initState()"></select>
<button ng-click="setState('NY')">Set State</button>

С привязкой к модели я могу использовать кнопку и наблюдатель, чтобы установить значение после загрузки, но попытка сделать это с помощью 'ng-init' просто не работает.

Функции контроллера:

$scope.state = 'IL';

$scope.initState = function() {
    $scope.setState('AZ');
};

$scope.setState = function(val) {
    $scope.state = val;
};