angular ng-options randomly not loading

I've got a dropdown menu like this:

<select selectpicker name="SubArea" ng-model="search.SubArea" ng-options="SubArea.SubArea as (SubArea.SubArea + ' (' + SubArea.Count + ')') for SubArea in subareas | orderBy:'SubArea'" ng-multiple="true" multiple title="All Areas" data-size="auto" data-header="Select Areas" data-live-search="true" data-selected-text-format="count > 2">
    </select>

This is in the controller:

$scope.subareas = {};

$http.get('subareas.php')
  .success(function(response) 
  {
    $scope.subareas = response;
  });

I'm also using this bootstrap select directive:

angular.module('angular-bootstrap-select', [])
.directive('selectpicker',
    [
        '$timeout',
        function($timeout) {
            return {
                restrict: 'A',
                require: ['?ngModel'],
                compile: function(tElement, tAttrs) {
                    tElement.selectpicker();

                    if (angular.isUndefined(tAttrs.ngModel)) {
                        throw new Error('Please add ng-model attribute!');
                    } 

                    return function(scope, element, attrs, ngModel) {
                        if (angular.isUndefined(ngModel)){
                            return;
                        }

                        scope.$watch(attrs.ngModel, function(newVal, oldVal) {
                            if (newVal !== oldVal) {
                                $timeout(function() {
                                    element.selectpicker('val', element.val());
                                });
                            }
                        });                            

                        ngModel.$render = function() {
                            element.selectpicker('val', ngModel.$viewValue || '');
                        };

                        $timeout(function() {
                            element.selectpicker('refresh');

                            element.change(function() { 
                                if ($(this).val() !== '') {
                                    $('.form-search .bootstrap-select.open').addClass('selected-option-check');
                                }else {
                                    $('.form-search  .bootstrap-select.open').removeClass('selected-option-check');
                                }
                            });


                        },1000);


                        ngModel.$viewValue = element.val();
                    };
                }
            };
        }
    ]
);

The problem I'm having is that sometimes the select options don't load (seems to be on pc's with a slower internet connection.

Any known issues with this?

Thanks in advance

I had a similar problem. It was solved when change ng-model after data loading.

$scope.subareas = {};

$http.get('subareas.php')
  .success(function(response) 
  {
    $scope.subareas = response;
    $scope.SubArea = [];
  });