What's the idiomatic way to store a value for multiple controllers to use in Angular.js?

Question

The backend of my app uses a rest api that requires the user to login via basic auth. This means every call they make requires them to send the username and password. But I want my app to hide this detail from the user. Yes, they will have a login page where they enter the username and password in, but from then on they should have no idea they're sending the username/password for every backend call.

My question is, how do I save the username/password on the client after the user submits on the login page so it can be used on every rest call thereafter?

This is almost my question, but the difference is

1. I'm not using a constant like he is
2. My value can't be initialized at module config time
3. I'm not sure if this answer is idiomatic

Side Note: I'm sure some people will leave comments saying, "You shouldn't do that!" Fair enough, but that doesn't answer my question. There are other use cases out there where you need to store a value on the client side that can only be initialized after an action. This is what I'd like to learn.

Answer 1

I would suggest storing the values in a service and injecting that service anywhere that you need the value. At config time, you can set the value to undefined and then you can fill it in whenever the value is available. This also allows you to use $watch to determine when the value is set.

I'd also take a look at the HTTP Auth Interceptor Module for AngularJS.

Here's a rough example that illustrates this concept.

<div ng-app="exampleApp">
    <div ng-controller="controller1">   
        {{ sharedData.someData }}
    </div>
    <div ng-controller="controller2">   
        <button ng-click="sharedData.someData='otherData'">Set Data</button>
    </div>
</div>


angular.module('exampleApp', []).controller('controller1', function(sharedData, $scope){
    $scope.sharedData = sharedData;      
}).controller('controller2', function(sharedData, $scope){
    $scope.sharedData = sharedData;       
}).service('sharedData', function(){
   this.someData = "test";
   return this;
});