title: Accessing global variables
body: <p>I'm trying to set a root scope in my angularjs project so I can access name from anywhere in the HTML (not in an ng-view).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="phonecatApp" ng-controller="ApplicationController"&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>That encapsulates the entire page</p>
  
  <p>I've loaded in a js file called app.js with the following in;</p>
  
  <pre><code>var phonecatApp = angular.module('phonecatApp', []);
  phonecatApp.factory('UserService', function(){
      return {
          name : 'Tom'
      };
  })
  
  function ApplicationController($scope, UserService){
      $scope.username = UserService.name
  }
  </code></pre>
  
  <p>And I'm trying to do the following in the index.html:</p>
  
  <pre><code>&lt;a href="#index" class="nav-item name_p_nav"&gt;{{username}}&lt;/a&gt; 
  </code></pre>
  
  <p>But it just comes back blank</p>
  
  <p>Edit: fixed typo</p>