In angularjs ui-bootstrap, how can I set initial option in bootstrap-formhelpers-states, and avoid '? undefined:undefined ?' option?

Question

I'm trying to resolve an old angularjs 'issue' which is actually expected behavior: 'Adding ng-model to predefined Select element adds undefined option' (https://github.com/angular/angular.js/issues/1019).

I'm working with ng 1.4.9, ui-bootstrap, ui-router and am trying to use 'bootstrap-formhelpers-states' for a State select list. I do have jQuery in the project in order to support FullCalendar, which I have an ng directive for, but I'm trying not to use it for anything else.

I can get the States list to work and without having to include any bootstrap js, but I'm not getting the binding to Model to work correctly on init, which is something many people have trouble with.

From this question (Why angularJS´s ui-view breaks Bootstrap Formhelper) I got a directive for Countries and adapted it for States:

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
            });
        }
    };
});

So if i don't add 'ng-model' the the 'select' element, it initializes OK with the value from the directive options (CA), but with the model binding, it doesn't; something to do with it not being a valid option in the list (but it is). The problem is when I'm editing an exiting address, I want the list to be set from a variable model value, but when set via the initial directive options, isn't changeable.

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>

With the model binding, I can use a button and a watcher to set the value after things load, but trying to do so via 'ng-init' just doesn't work.

Controller functions:

$scope.state = 'IL';

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

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