Sharing data with services but ng-model still not working

Question

I am trying to share data between main.html (my main view) and header.html (the embedded template on page). I am having two issues with this approach:

1. Data does not show on the dropdown in header.html, unless I do ....

2. Doing 1) creates another scope, so the changes are not perpetuated across the application until the next refresh.

All my data is kept in a service, and I want it to update in real-time whenever a user changes an option in the dropdown. I am using ngStorage to store the data in the browser cache.

index.html

  <div ng-include="'views/templates/header.html'"></div>
  <!-- main.html goes in view -->    
  <div ng-view=""></div>

header.html

<header class="header-style-2">
   <select class="selectpicker" ng-model="vm.selectedCurrency" ng-options="o as o for o in vm.currencyList" ng-change="vm.setCurrency(vm.selectedCurrency)"></select>
</header>

main.html

<div class="details-sec"><a href="#">{{ product.name }}</a> <span class="font-montserrat">{{ product.price }} {{ vm.selectedCurrency }}</span> </div>

main.js - MainController

vm.currencyList = MainService.getCurrencyList();
vm.selectedCurrency = MainService.getCurrency();

vm.setCurrency = function(selectedCurrency) {
  vm.selectedCurrency = MainService.setCurrency(selectedCurrency);
};

main.js - MainService

function getCurrencyList()
{
  var currencyList = ['GBP', 'USD', 'EUR'];
  return currencyList;
}

function getCurrency() {
  if($localStorage.selectedCurrency) {
    return $localStorage.selectedCurrency;
  }
  return getCurrencyList()[0];
}

function setCurrency(newSelectedCurrency) {
  $localStorage.selectedCurrency = newSelectedCurrency;      
}

function resetCurrency() {
  $localStorage.selectedCurrency = getCurrencyList()[0];      
}