Angular: select chrome scroll

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  <button type="button" ng-click="clickButton()">Add options
  </button>
  <select id="rawr" ng-model="value" style="width: 200px;"
    ng-options="o.id as o.label for o in list"
  ><option value=""></option></select>
  {{value}}
</div>

JavaScript

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

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

var focused = false;
var rawr = document.getElementById('rawr');

rawr.addEventListener('focus', function() {
    focused = true;
});
rawr.addEventListener('blur', function() {
    focused = false;
});

function MyCtrl($scope, $timeout) {
    $scope.list = [];
    function addToList() {
        $scope.list = [{
            "id" : 1,
            "label" : "One"
          }, {
            "id" : 2,
            "label" : "Two"
          }, {
            "id" : 3,
            "label" : "Three"
          }
        ];
        
        if (focused) {
            rawr.blur();
            
            setTimeout(function() {
                rawr.focus();
                
                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('mousedown', true, true, window);
                rawr.dispatchEvent(event);
            }, 100);
        }
    }
    $scope.clickButton = function() {
    	$timeout(function() {
      	addToList();
      }, 3000);
    };
}