Pass variable from app.js to index.html

$scope.username = data 

in your js file. (Assuming data is what is returned)

and in the html just do {{username}}

Try passing in $rootScope (since that is where you technically are), then assign username on the $rootScope. Something like so:

function($http, $rootScope) {
  $rootScope.username = "Foo";
}

Generally speaking, you wouldn't have all of this logic within one glob. When you think about what you're doing in this small section of JS, you're:

• defining a module,
• matching URLs with templates and controllers,
• making a GET request,
• (logging in a user?),
• attempting to display the user's name in the HTML

You would be better off breaking this into chunks, with specific purposes.

Let's think about what you're trying to accomplish: you want your navbar to be aware of the user. To me, this sounds like an opportunity to use a controller.

index.html

<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="Navbar">
  <div class="navbar-inner">
    <div class="container-fluid">
      <button type="button" 
              class="btn btn-navbar" 
              data-toggle="collapse" data-target=".nav-collapse">
      </button>
      <a class="brand" href="/">MyApp</a>
      <div class="nav-collapse collapse">
        <p class="navbar-text pull-right">
          Logged in as <a href="#" class="navbar-link">{{username}}</a>
        </p>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

scripts/controllers/Navbar.js

staticApp.controller('Navbar', ['$scope', function ($scope) {
    $scope.username = 'Username!';
}]);

Now, we can provide a username to the $scope matching the Navbar template (div.navbar here). Of course, this isn't all that useful, since Username! is probably not everybody's username.

So, now our problem is: where can we put our code that handles logging in users from the server?

The perfect place for that is a service.

scripts/services/User.js

staticApp.factory('User', ['$http', function ($http) {
  var User;

  var setUser = function (user) {
    if (angular.isObject(user))
      User = user;
  };

  var getUser = function () {
    if (angular.isObject(User))
      return User;
  };

  var logIn = function (username, password) {
    // $http call that validates the username and password.
    setUser({ user: username });
  };

  return {
    logIn: logIn,
    getUser: getUser
  };
}]);

The logic in this controller can be edited to match your flow, but it's not a bad idea to keep it modularized in this way. Exposing the logIn and getUser methods should be all your controllers will need.

Let's go back to the Navbar controller.

scripts/controllers/Navbar.js

staticApp.controller('Navbar', ['$scope', 'User', function ($scope, User) {
    var user = User.getUser();

    $scope.username = user.username;
}]);

After you've configured the User service to work with your app's own user handling process, your app will be in a better position to grow. You don't have to mess with $rootScope, your templates can be bound to a controller (maybe the Navbar template will need some other functionality), and most importantly, your different concerns have been separated.

If you have any questions about anything I've changed above, let me know!