Select2 directive

Issue in Safari 6

HTML

<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<div ng-app="miniapp" ng-controller="Ctrl">
    <select ng-model="selectedOption" wb-select2 select-width="300px">
          <option ng-repeat="(k, v) in optionList" value="{{k}}">{{v}}</option>
        
    </select>
    {{selectedOption}}
    <button ng-click="changeModelOutside()">Click me</button>
</div>

JavaScript

var $scope;
var app = angular.module('miniapp', []);

app.directive('wbSelect2', function () {
    return {
        restrict: 'A',
        scope: {
                'selectWidth': '@',
                'ngModel': '='
        },
        link: function (scope, element, attrs) {
            //Setting default values for attribute params
            scope.selectWidth = scope.selectWidth || 200;
            element.select2({
                width: scope.selectWidth,
            });
            
            scope.$watch('ngModel', function(newVal, oldVal){
                window.setTimeout(function(){
                    element.select2("val", newVal);
                });
            });
        }
    };
});



function Ctrl($scope) {
    $scope.optionList = {
        'key1': 'Option 1',
            'key2': 'Option 2',
            'key3': 'Option 3',
            'key4': 'Option 4'
    };

    $scope.selectedOption = 'key3';
    $scope.changeModelOutside = function () {
        $scope.selectedOption = 'key4';
        
    };
}