Tengo una directiva muy simple con la que estoy trabajando: es un pequeño contenedor alrededor de un menú desplegable. Quiero exponer un atributo, "selectedOption" (bueno, opción seleccionada) a partir del cual puedo vincular en dos direcciones al controlador. Establecí la propiedad en el alcance de la directiva (y la configuré en = que pensé que permitiría el enlace bidireccional), luego expuse una propiedad en el controlador principal.

He adjuntado un ejemplo. Hubiera esperado que el elemento predeterminado que se muestra sea "Beta". Y si cambiara las selecciones a Alfa, el valor del Controlador se actualizaría a "A". Pero eso no sucede: parecen estar aislados a pesar de que he especificado que esta propiedad debería estar disponible para el controlador.

¿Qué código mágico me estoy perdiendo aquí?

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>