title: AngularJS switch css theme on user selection
body: <p>I downloaded the themes from bootswatch and I'm trying to allow the user to switch the theme. When the theme is switched all the bootstap css temporarily goes away until the new theme is loaded. How can I prevent the change until the css is loaded or switch back to the default theme until the new one is loaded?</p>
  
  <p>index.ejs (in the head)</p>
  
  <pre><code>&lt;link rel="stylesheet" href="/external/bootstrap/css/bootstrap_yeti.min.css"
        ng-if="myTheme == ''"&gt;
  &lt;link rel="stylesheet" ng-href="/external/bootstrap/css/bootstrap_{{myTheme}}.min.css"
        ng-if="myTheme != ''"&gt;
  </code></pre>
  
  <p>Selection</p>
  
  <pre><code>&lt;select class="form-control"
          id="theme"
          name="theme"
          ng-model="theme"
          ng-change="newTheme()"&gt;
    &lt;option value="" disabled&gt;Select Theme&lt;/option&gt;
    &lt;option ng-repeat="(key, val) in availableThemes" value="{{val}}"&gt;{{key}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>controller on index</p>
  
  <pre><code>$scope.myTheme = '';
  $rootScope.$watch('myTheme', function(value) {
    if (value != undefined) {
      $scope.myTheme = value;
    }
  });
  </code></pre>
  
  <p>controller for selection</p>
  
  <pre><code>$scope.availableThemes = {
    Cerulean: 'cerulean',
    Cosmo:    'cosmo',
    Yeti:     'yeti'
  };
  $scope.newTheme = function() {
    console.log($scope.theme);
    if ($scope.theme != undefined) {
      $rootScope.myTheme = $scope.theme;
    }
  }
  </code></pre>
  
  <p>Any help is appreciated! Thank you</p>