Ich habe eine sehr einfache Direktive, mit der ich arbeite - es ist eine kleine Hülle um ein Dropdown. Ich möchte ein Attribut "selectedOption" (nun, selected-option) daraus verfügbar machen, das ich bidirektional an den Controller binden kann. Ich habe die Eigenschaft im Geltungsbereich der Direktive festgelegt (und sie auf = gesetzt, was meiner Meinung nach die bidirektionale Bindung ermöglichen würde) und dann eine Eigenschaft auf dem Hauptcontroller verfügbar gemacht.

Ich habe ein Beispiel angehängt. Ich hätte erwartet, dass der angezeigte Standardartikel "Beta" ist. Und wenn ich die Auswahl in Alpha ändere, wird der Controller-Wert auf "A" aktualisiert. Das passiert aber nicht - sie scheinen isoliert zu sein, obwohl ich angegeben habe, dass diese Eigenschaft für den Controller verfügbar sein soll.

Welcher magische Code fehlt mir hier?

angular
    .module('app', []);

angular.module('app').controller('test', function(){
    var vm = this;
    
    vm.inv = 'B';
    vm.displayInv = function () {        
        alert('inv:' + vm.inv);
    };
});

angular.module('app')
       .directive('inventorytest', function () {
    return {
        restrict: 'E',
        template: '<select ng-model="ctrl.selectedOption" ng-options="inv.code as inv.desc for inv in ctrl.invTypes"></select>{{ctrl.sample}}. Selected: {{ctrl.selectedOption}}',

        scope: { selectedOption: '='},
        controller: function () {
            this.invTypes = [
                { code: 'A', desc: 'Alpha' },
                { code: 'B', desc: 'Bravo' },
                { code: 'C', desc: 'Charlie' },
            ];
            this.sample = 'Hello';
        },
        controllerAs: 'ctrl'
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<div ng-app="app" ng-controller="test as vm">
    <inventorytest selected-option='vm.inv'></inventorytest>
    <button ng-click="vm.displayInv()">Display</button>
    <br/>
    Controller: {{vm.inv}}
</div>