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

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">
           <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('myDirective', function() {});
//myApp.factory('myService', function() {});

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