How to get Access Token from ASP.Net Web API 2 via AngularJS $http?
Do this:
$http({ url: '/token', method: 'POST', data: "userName=" + $scope.username + "&password=" + $scope.password + "&grant_type=password"})
I think, adding the header {headers: { 'Content-Type': 'application/x-www-form-urlencoded' } to your post request would do the trick. It should be something like this:
$http.post(loginAPIUrl, data, {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
You are getting that error because the default implementation of the OWIN OAuth provider is expecting the post to the "/Token" service to be form encoded and not json encoded. There is a more detailed answer here How do you set katana-project to allow token requests in json format?
But you can still use AngularJs you just have to change the way the $http post is made. You can try the answer here if you don't mind using jquery to change your params How can I post data as form data instead of a request payload? Hope that helps.