How to access custom Token header added in Asp.Net Web Api response from Angular JS application?

Question

    //My login method is as follows, which takes credentials and validates them against a db table entries
    [HttpPost]
    [Route("api/login")]
    public IHttpActionResult Authenticate([FromBody]LoginModel credentials)
    {
        IHttpActionResult result;
        HttpResponseMessage response;
        TokenModel tokenInfo;
        var userId = (from n in _data.Users
                      where n.id == credentials.id && n.Password == credentials.Password
                      select n.id).FirstOrDefault().ToString();

        if (!string.IsNullOrEmpty(userId))
        {
            //Following mehtod generates a token and stores it in db for further usage
            tokenInfo = tokenFunctions.GenerateToken(userId);
            if (tokenInfo != null)
            {
                //Creating response message with custom headers info
                response = Request.CreateResponse(HttpStatusCode.OK, userId);
                response.Headers.Add("Token", tokenInfo.AuthToken);
                response.Headers.Add("TokenExpiry", ConfigurationManager.AppSettings["AuthTokenExpiry"]);
                response.Headers.Add("Access-Control-Expose-Headers", "Token");
            }
            else
            {
                response = Request.CreateResponse(HttpStatusCode.Unauthorized);
            }

            result = ResponseMessage(response);
            return result;
        }

        return Unauthorized();
    }

When I am accessing the above method through fiddler, I am able to see Token and TokenExpiry headers under "Miscellaneous" section. But when I am trying to access this method from angular JS application, I am not able to see Token/TokenExpiry headers in headers parameter of $http.post() call back method. Could anyone please help me to resolve this issue? Your reply helps me a lot.