In Firefox, Angular model doesn't update until focus leaves dropdown: SOLUTION

Try this in different browsers.

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl" style="padding:20px">
    <label>Start here, then tab through the inputs:</label>
    <div>
        <input type="text" id="firstInput" placeholder="(my first input)" />
    </div>
    <label>Do you need another input box before moving on?</label>
    <div>
        <select ng-model="needAnotherInput" update-on-keydown>
           <option value="false">No, I do not</option>
           <option value="true">Yes, I do</option>
        </select>
    </div>
    <div>
        <input ng-show="needAnotherInput" type="text" />
    </div>
    <label>Here's the next thing to fill out:</label>
    <div>
        <input type="text" />
    </div>
</div>

CSS

body {
    font-family: Arial, sans-serif;
    color: #660066;
}

*:focus {
    outline: 2px solid #FF00FF;
    background-color: #FFE6FF; 
}

div {
    margin: 5px 0 15px;
}

label {
    margin-bottom: 5px;
}

input, select {
    color: #330033;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #660066;
    height: 30px; 
    border-radius: 3px;
}

::-webkit-input-placeholder {
   color: #FF80FF;
}
:-moz-placeholder { /* Firefox 18- */
   color: #FF80FF;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #FF80FF;  
}
:-ms-input-placeholder {  
   color: #FF80FF;  
}

*, *::before, *::after {
    box-sizing: border-box;
}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive("updateOnKeydown", ['$timeout', function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                // updates model when a key is pressed; this way, when a keyboard user tabs out of the dropdown after using
                // the arrows/letter keys to make a selection, the DOM is up-to-date and the correct element will be focused
                element.bind('keydown', function (evt) {
                    evt = (!evt) ? window.event : evt;
                    var keyCode = evt.keyCode || evt.charCode;
                    if (keyCode) { // do we want to exclude anything?
                        if (!scope.$$phase) {
                            $timeout(function () {
                                $(element).change();
                            });
                        }
                        else {
                            console.log('in the middle of something!');
                        }
                    }
                });
            }
        }
    }]);

//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.needAnotherInput = false;
    $(document).ready(function () {
        setTimeout(function() { $('#firstInput').focus(); }, 0);
    });
}