[SOLVED] Change CSS Style Sheet on click with Ionic Framework

Change CSS Style Sheet on click with Ionic Framework

I have a basic Ionic App and would like to apply one of three different style sheets based on a User Input.

The page will be pre-loaded with the basic style, then a user can select two other options, so far the original style is loaded and I can console log a change in the variable, but the page is not updated. Here is my code:

HTML INDEX:

<!DOCTYPE html>
<html ng-app="greenwichFitness" ng-controller='SettingsCtrl'>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link ng-href="{{style}}" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-controller='SettingsCtrl'>

    <ion-nav-view></ion-nav-view>

    <ion-nav-bar class="bar-calm">
      <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>

  </body>
</html>

HTML VIEW:

<div class="list">
  <label class="item item-input item-select">
     <div class="input-label">
        Accessibility Views
      </div>
      <select ng-model='option' ng-change='changeView(option)'>
        <option ng-selected='style'>Plain</option>
        <option>Larger Text</option>
        <option>Inverted Colours</option>
      </select>
  </label>
</div>

CONTROLLER:

.controller('SettingsCtrl', function($scope, Settings) {

  $scope.style = Settings.style;

  $scope.changeView = function(newView) {
    Settings.changeView(newView);
  };
})

SERVICE:

    .factory('Settings', function() {

      var defaultStyle = 'lib/ionic/css/ionic.css';

      var styles = { 'Plain': defaultStyle,
                     'Larger Text': 'lib/ionic/css/ionic-large.app.css',
                     'Inverted Colours': 'lib/ionic/css/ionic-invert.app.css' }

      var o = { notifications: false, frequency: 'Daily', style: defaultStyle };

      o.changeView = function(newView) {
        o.style = styles[newView];
      };
)}

Any help would be greatly appreciated.

Solution

Not sure if this is what you had in mind but I got it to work with the following code:

Controller:

  $scope.settings = Settings;

HTML:

<link ng-href="{{settings.style}}" rel="stylesheet">