title: Dynamic Resource Headers
body: <p>I would like to have service providing a resource as in the following code:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>   angular.module('myApp.userService', ['ngResource'])
    .factory('UserService', function ($resource)
    {
      var user = $resource('/api/user', {},
            {
              connect: { method: 'POST', params: {}, isArray:false }
            });
      return user;
    }
  </code></pre>
  
  <p>Then when using the <code>connect</code> action, I would like to dynamically pass a HTTP header, meaning that it may change for each call. Here is an example, in the controller, please see the comment in the code :</p>
  
  <pre class="lang-js prettyprint-override"><code> $scope.user = UserService;
  
   $scope.connect = function ( user )
          {
            var hash = 'Basic ' + Base64Service.encode(user.login + ':' + user.password);
  
            // I would like this header to be computed 
            // and used by the user resource
            //  each time I call this function
            $scope.user.headers = [{Authorization: hash}];
  
            $scope.user.connect( {},
                function()
                {
                    // successful login
                    $location.path('/connected');
                }
                ,function()
                {
                    console.log('There was an error, please try again');
                });
         }
  </code></pre>
  
  <p>Do you know a way to do that, either directly or via a trick?</p>
  
  <hr>
  
  <h2>Final thoughts</h2>
  
  <p>Accepted answer does not fully answer the question as the headers are not totally dynamic because the factory returns actually a factory (!) which is not the case in my code.</p>
  
  <p>As $resource is a factory, there is no way to make it dynamic.</p>
  
  <p>I finally destroy the resource object each time the user connects. This way, I have the resource with a header computed when the user connects.</p>
  
  <p>The solution provided by @Stewie is useful for that, so I keep it as accepted.</p>
  
  <hr>
  
  <p>Here is how I did the connect, which can be used multiple times as the resource is destroyed/recreated when (re)connecting:</p>
  
  <pre class="lang-js prettyprint-override"><code> this.connect = function (user)
   {
      self.hash = 'Basic ' + Base64Service.encode(user.login + ':' + user.password);
  console.log("CONNECT login:" + user.login + " - pwd:" + user.password + " - hash:" + self.hash);
  
  if (self.userResource)
  {
    delete self.userResource;
  }
  
  self.userResource = $resource('/api/user/login', {}, {
    connect: {
      method: 'POST',
      params: {},
      isArray: false,
      headers: { Authorization: self.hash }
    }
  });
  
  var deferred = $q.defer();
  self.userResource.connect(user,
    function (data)
    {
      //console.log('--------- user logged in ----- ' + JSON.stringify(data));
      // successful login
      if (!!self.user)
      {
        angular.copy(data, self.user);
      }
      else
      {
        self.user = data;
      }
  
      self.setConnected();
  
      storage.set('user', self);
  
      deferred.resolve(self);
    },
    function (error)
    {
      self.user = {};
      self.isLogged = false;
  
      storage.set('user', self);
  
      deferred.reject(error);
    }
  );
  
  return deferred.promise;
  </code></pre>
  
  <p>};</p>