title: angular, access to scope outside of the ng-view wrapping div
body: <p>I am trying to set up custom themeing on my app, so what I am doing is letting the user choose certain themes and it will change the apps theme holistically. I have a service which sends a piece of json and listens for it changing inside the controller of each view. Now this works fine within the view itself - for reference here's some snippets of the working code.</p>
  
  <p>my factory controlling the theme - </p>
  
  <pre><code>angular.module('demoApp')
  .factory('templatingFactory', function () {
  
  var meaningOfLife = 
        {
            'h1': '#ea6060',
            'bg': '#ffffff'
        };
  
  return {
    setTheme: function(theme) {
      meaningOfLife = theme;
  
    },
    getTheme: function() {
      return meaningOfLife;
    }
  };
  
  });
  </code></pre>
  
  <p>One of my example controllers showing and changing the theme (and listening for changes)</p>
  
  <pre><code>$scope.themeStore = templatingFactory.getTheme();
  console.log($scope.themeStore);
  
  //send new themes
  $scope.themeOne = function () {
    var newT1 = { 'h1': '#8A6516',
                  'bg': '#000000'};
    templatingFactory.setTheme(newT1);
  
  };
  
  $scope.themeTwo = function () {
    var newT2 = { 'h1': '#ffffff',
                  'bg': '#ea6060'};
    templatingFactory.setTheme(newT2);
  
  
  };
  
  $scope.themeThree = function () {
    var newT3 = { 'h1': '#ea6060',
                  'bg': '#ffffff'};
    templatingFactory.setTheme(newT3);
  
  
  };
  //listen for new themes
  $scope.watchThemes = templatingFactory.getTheme();
  $scope.$watch(templatingFactory.getTheme, function (newTheme) { 
  
      $scope.themeStore = newTheme;
  
  });
  </code></pre>
  
  <p>and then on the template/view itself i do something like this -</p>
  
  <pre><code>&lt;h3 ng-style="{ 'color' : themeStore.h1 }"&gt;Title&lt;/h3&gt;
  </code></pre>
  
  <p>So my issue is that this works fine inside the view. However the ng-view tag is inside the body and outside of it are the body containers, as well as the header and footer menus that I would like to be able to hook onto with this theme object. So my quesiton is, is there any way to use that scope outside of the ng-view? I don't think it's possible but I'm not sure how else I could access and put a ng-style on the header footer and body to change some css on it with this method I am using.</p>
  
  <p>So for a simple reference it looks like this - </p>
  
  <pre><code>&lt;body ng-app="myApp"&gt;
   &lt;div class="container"&gt;
  
    &lt;div class="header" ng-style="{ 'background-color' : themeStore.bg }"&gt;
  
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
          &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
      &lt;/button&gt;
      &lt;div class="headerLogo"&gt;&lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div ng-view class="velocity-opposites-transition-slideUpIn" data-velocity-opts="{ duration: 500 }" ng-style="{ 'background-color' : themeStore.bg }"&gt; &lt;/div&gt;
  
    &lt;div class="footer"&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>So as you can see - I'm trying to hook onto the header to change the background color, which does not work like this. What I noticed though, is if I put it on the ng-view div itself, it works alright.</p>
  
  <p>I would much appreciate any input as I've been stuck on this for a while. Thank you for taking the time to read!</p>