Selectpicker city не обновляется после выбора страны

angular 
  .module('app', []) 
  .directive('selectpicker', SelectPickerDirective) 
  .controller('IndexController', function($http, $timeout) { 
    var vm = this; 
 
    vm.location = { 
      countries: [], 
      cities: [], 
      country: null, 
      city: null 
    }; 
 
    vm.onSelectedCountry = onSelectedCountry; 
    vm.onSelectedCity = onSelectedCity; 
    vm.init = init; 
 
    function init() { 
      $http.get('http://test.getresto.eu/api/v1/location/countries?ip').then(function(response) { 
        vm.location.countries = response.data.data; 
        $timeout(function () { 
          angular.element('.country').selectpicker('refresh'); 
        }); 
        angular.forEach(vm.location.countries, function(country) { 
          if (parseInt(response.data.meta.country_id) === country.id) { 
            vm.location.country = country; 
            vm.location.cities = country.cities; 
            angular.forEach(vm.location.country.cities, function(city) { 
              if (parseInt(response.data.meta.city_id) === city.id) { 
                vm.location.city = city; 
              } 
            }); 
          } 
        }); 
        
      }); 
    } 
 
    function onSelectedCity(cityId) { 
			console.log(cityId); 
    } 
 
    function onSelectedCountry(countryId) { 
      if (vm.location.city && vm.location.city.id) { 
        vm.location.city.id = null; 
      } 
      vm.location.cities = []; 
      angular.forEach(vm.location.countries, function(country) { 
        if (countryId === country.id) { 
          vm.location.country = country; 
          vm.location.cities = country.cities; 
          angular.element('.city').selectpicker('refresh'); 
        } 
      }); 
    } 
  }); 
 
angular.bootstrap(document, ['app']); 
 
SelectPickerDirective.$inject = ['$parse']; 
function SelectPickerDirective($parse) { 
  return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
      element.selectpicker({ 
        noneSelectedText: 'Select' 
      }); 
      element.selectpicker('refresh'); 
      element.hide(); 
 
      if (attrs.selcallback) { 
        element.on('changed.bs.select', function(e) { 
          var callback = $parse(attrs.selcallback)(scope); 
            var data = null; 
            var val = $(e.currentTarget).val(); 
 
            try { 
              // maybe value as object ? 
              data = JSON.parse(val); 
            } catch (e) { 
              data = val; 
            } 
 
            callback(data); 
        }); 
      } 
 
      scope.$watch(attrs.ngModel, function(newVal, oldVal) { 
        scope.$parent[attrs.ngModel] = newVal; 
        scope.$evalAsync(function() { 
          if (!attrs.ngOptions || /track by/.test(attrs.ngOptions)) element.val(newVal); 
          element.selectpicker('refresh'); 
        }); 
      }); 
 
      scope.$on('$destroy', function() { 
        scope.$evalAsync(function() { 
          element.selectpicker('destroy'); 
        }); 
      }); 
    } 
  }; 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css" rel="stylesheet"/> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div ng-controller="IndexController as ctrl" ng-init="ctrl.init()"> 
  <select selectpicker selcallback="ctrl.onSelectedCountry" ng-model="ctrl.location.country.id" class="form-control country"> 
    <option ng-repeat="country in ctrl.location.countries" value="{{country.id}}"> 
      {{country.name}} 
    </option> 
  </select> 
 
<br /><br /> 
     
    <select selectpicker selcallback="ctrl.onSelectedCity" ng-model="ctrl.location.city.id" class="form-control city"> 
      <option ng-repeat="city in ctrl.location.cities" value="{{city.id}}"> 
        {{city.name}} 
      </option> 
    </select> 
 
</div>