title: Pass variable from app.js to index.html
body: <p>i can successfully get data from the /api/session.json call and log it to my console.</p>
  
  <p>how do i send the output of this api call to my index.html file and replace "Username"?</p>
  
  <p>thanks!</p>
  
  <p>here is my app.js file for my angular application:</p>
  
  <pre><code>'use strict';
  
  var staticApp = angular.module('staticApp', [])
    .config(['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'views/main.html',
          controller: 'MainCtrl'
        })
        .otherwise({
          redirectTo: '/'
        });
    }])
    .run( function($http) {
      $http.defaults.useXDomain = true;     
  
      // API CALL
      $http({method: 'GET', url: '/api/session.json'}).
        success(function(data, status, headers, config) {
  
          // THIS WORKS!!
          // MY CONSOLE SHOWS THIS:
          // Object {user: "devuser"}
  
          console.log(data); 
  
        }).
        error(function(data, status, headers, config) {
          console.log(status);
        });
    });
  </code></pre>
  
  <p>and here is my index.html fiile:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;  
    &lt;head&gt;
      &lt;!-- meta and css stuff --&gt;
    &lt;/head&gt;
    &lt;body ng-app="staticApp"&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="navbar-inner"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;button type="button" 
                    class="btn btn-navbar" 
                    data-toggle="collapse" data-target=".nav-collapse"&gt;
            &lt;/button&gt;
            &lt;a class="brand" href="/"&gt;MyApp&lt;/a&gt;
            &lt;div class="nav-collapse collapse"&gt;
              &lt;p class="navbar-text pull-right"&gt;
  
                &lt;!-- I WANT Username TO BE THE VALUE RETURNED FROM THE API CALL --&gt;
  
                Logged in as &lt;a href="#" class="navbar-link"&gt;Username&lt;/a&gt;
              &lt;/p&gt;
            &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="container" ng-view&gt;&lt;/div&gt;
  
      &lt;script src="scripts/vendor/angular.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/controllers/main.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>