title: Firefox select dropdown keeps refreshing/reverting to default option due to running Javascript - AngularJS
body: <p>I'm building an app in AngularJS and am having trouble with select dropdown menus when using Firefox.  </p>
  
  <p>When I click a select menu and hover over the options, it resets the selected option, from the one my cursor is hovering over, to the default/first option.  When the number of options is large, it becomes very difficult to select the correct option.</p>
  
  <p>The app requires JavaScript to update the screen every second, and this seems to be the cause.</p>
  
  <p>However, I don't seem to have this problem with Chrome or Safari.</p>
  
  <p>Is there a way to resolve this for Firefox?</p>
  
  <p><a href="http://plnkr.co/edit/h6CsytPXn4qrTdQaj08d?p=preview">Demo here</a>.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myapp"&gt;
    &lt;head&gt;
      &lt;script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
      &lt;link href="style.css" rel="stylesheet" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="ctrl"&gt;
      &lt;div ng-init="updatetimer()"&gt;
      &lt;div&gt;seconds: {{counter}}&lt;/div&gt;
      &lt;select ng-model="something" ng-options="n.name for n in namelist"&gt;
        &lt;option value=""&gt;select person&lt;/option&gt;    
      &lt;/select&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>script.js</p>
  
  <pre><code>var app = angular.module('myapp', []);
  
  var ctrl = ['$scope', '$timeout', function($scope, $timeout) {
  
      $scope.counter=0;
  
      $scope.namelist = [
        {name: "Name1"}, {name: "Name2"}, {name: "Name3"}, {name: "Name4"}, {name: "Name5"},
        {name: "Name6"}, {name: "Name7"}, {name: "Name8"}, {name: "Name9"}, {name: "Name10"},
        {name: "Name11"}, {name: "Name12"}, {name: "Name13"}, {name: "Name14"},
        {name: "Name15"}, {name: "Name16"}, {name: "Name17"}, {name: "Name18"},
        {name: "Name19"}, {name: "Name20"}, {name: "Name21"}, {name: "Name22"},
        {name: "Name23"}, {name: "Name24"}, {name: "Name25"}, {name: "Name26"},
        {name: "Name27"}, {name: "Name28"}, {name: "Name29"}, {name: "Name30"}
     ];
  
    $scope.updatetimer = function() {
  
      var updater = function() {
        $scope.counter++;
        $timeout(updater, 1000);
      }
      updater();
    };
  
  }];
  </code></pre>