How to change model in AngularJS on keydown event

Question

I'm trying to put out a keybaord layout in an AngularJS app. I want it so that when I press the shift key, the letters showing on the screen will change to the corresponding letters on the keyboard. I've created a function in my controller to respond to the shift keydown event and pass that on to a directive which shows a different model based on what the keydown function returns, but nothing is showing up. Any ideas of what I'm doing wrong?

$scope.keyLayout = [
        {label: '`'},
        {label: '1'},
        {label: '2'},
        {label: '3'},
        {label: '4'},
        {label: '5'},
        {label: '6'},
        {label: '7'},
        {label: '8'},
        {label: '9'},
        {label: '0'},
        {label: '-'},
        {label: '='},
        {label: 'q'},
        {label: 'w'},
        {label: 'e'},
        {label: 'r'},
        {label: 't'},
        {label: 'y'},
        {label: 'u'},
        {label: 'i'},
        {label: 'o'},
        {label: 'p'},
        {label: '['},
        {label: ']'},
        {label: '\x5c'},
        {label: 'a'},
        {label: 's'},
        {label: 'd'},
        {label: 'f'},
        {label: 'g'},
        {label: 'h'},
        {label: 'j'},
        {label: 'k'},
        {label: 'l'},
        {label: ';'},
        {label: '\x27'},
        {label: 'z'},
        {label: 'x'},
        {label: 'c'},
        {label: 'v'},
        {label: 'b'},
        {label: 'n'},
        {label: 'm'},
        {label: ','},
        {label: '.'},
        {label: '/'}

    ];
    $scope.keyLayoutShift = [
        {label: '~'},
        {label: '!'},
        {label: '@'},
        {label: '#'},
        {label: '$'},
        {label: '%'},
        {label: '^'},
        {label: '&'},
        {label: '*'},
        {label: '('},
        {label: ')'},
        {label: '_'},
        {label: '+'},
        {label: 'Q'},
        {label: 'W'},
        {label: 'E'},
        {label: 'R'},
        {label: 'T'},
        {label: 'Y'},
        {label: 'U'},
        {label: 'I'},
        {label: 'O'},
        {label: 'P'},
        {label: '{'},
        {label: '{'},
        {label: '|'},
        {label: 'A'},
        {label: 'S'},
        {label: 'D'},
        {label: 'F'},
        {label: 'G'},
        {label: 'H'},
        {label: 'J'},
        {label: 'K'},
        {label: 'L'},
        {label: ':'},
        {label: '\x22'},
        {label: 'Z'},
        {label: 'X'},
        {label: 'C'},
        {label: 'V'},
        {label: 'B'},
        {label: 'N'},
        {label: 'M'},
        {label: '<'},
        {label: '>'},
        {label: '?'}

    ];

    $scope.shiftDown = function(ev) {
        if (ev.which==16)
            return "keyLayoutShift";
        else
            return "keyLayout";
    }

    app.directive("keyboard", function(shiftDown){
        if (shiftDown == "keyLayout") {
            return {
                restrict: "E",
                template: "<ul id='keyboard'>" +
                    "<li class='letter' ng-repeat='key in keyLayout'></li>" +
                    "</ul>"
            };
        }
    })

Answer 1

A way to do this is to gather all of the required elements of your keyboard directive within the confines of the directive and only expose elements of your directive by using the scope option e.g. events, variables and other information by using different scope notations: &, @, = see angularjs directives. Next is to setup these events in the link option by using the element parameter and use the directives controller to set the initial keyLayout. Note: use scope.$apply() to update the currently selected keyLayout.

See this Plunker as a DEMO