Spring Security and Angular js basic authentication not working - angularjs

Question

I am trying to build a simple application in angular-js and spring security.I am using basic authentication.Whenever browsing home page ,i am getting basic authentication pop-up for user name password.If i cancel it and login with correct password,application is working fine.But if i enter wrong password the same basic authentication pop -up is coming.I am sending X-Requested-With header in every request and it is visible in header fiends also.Any one has any idea,what's going wrong here?
Angular :
'use strict';
var todoApp=angular.module('todoApp',['ngRoute']);
todoApp.config(['$routeProvider','$httpProvider',function($routeProvider,$httpProvider){
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$routeProvider.when('/',{
templateUrl:'resources/templates/Home.html',
controller:'HomeController'
}).otherwise({redirectTo:'/'});
}]);
'user strict';
todoApp.controller('NavBarController',function($rootScope, $scope, $http, $location, $route){
$scope.credentials = {};
$scope.login = function() {
authenticate($scope.credentials, function(authenticated) {
if (authenticated) {
console.log("Login succeeded")
$location.path("/");
$scope.error = false;
$rootScope.authenticated = true;
} else {
console.log("Login failed")
$location.path("/");
$scope.error = true;
$rootScope.authenticated = false;
}
})
};
$scope.logout=function(){
$http.post('logout', {}).success(function() {
$rootScope.authenticated = false;
$location.path("/");
}).error(function(data) {
console.log("Logout failed")
$rootScope.authenticated = false;
});
}
var authenticate=function(credentials,callback){
//create headers for request
var headers= credentials? {
authorization:"Basic "
+btoa(credentials.username+":"+credentials.password)}:{};
//request to http basic service
$http.get('user/authenticate',{
headers:headers
}).success(function(data){
if(data.name){
$rootScope.authenticated=true
}else{
$rootScope.authenticated=false;
}
callback && callback($rootScope.authenticated);
}).error(function(data){
$rootScope.authenticated=false;
callback && callback(false);
});
};
authenticate();
});
security configuration:
<sec:http use-expressions="true">
<sec:intercept-url pattern="/" access="permitAll"/>
<sec:intercept-url pattern="/index.html" access="permitAll"/>
<sec:intercept-url pattern="/Home.html" access="permitAll"/>
<sec:intercept-url pattern="/**" access="hasRole('ROLE_USER')"/>
<sec:http-basic/>
</sec:http>
<sec:authentication-manager>
<sec:authentication-provider>
<sec:jdbc-user-service data-source-ref="dataSource" id="userDetailsService"/>
</sec:authentication-provider>
</sec:authentication-manager>
Headers:
Content-Language:en
Content-Length:1160
Content-Type:text/html;charset=utf-8
Date:Fri, 12 Jun 2015 02:46:18 GMT
Server:Apache-Coyote/1.1
WWW-Authenticate:Basic realm="Spring Security Application"
Request Headers
view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Cookie:JSESSIONID=A06CEC616C9A34B915EA298A890C5E80
Host:localhost:9999
Pragma:no-cache
Referer:http://localhost:9999/todoapp/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36
X-Requested-With:XMLHttpRequest

Answer 1

Sending WWW-Authenticate:Basic realm="Spring Security Application" will cause the browser to show a login form.
You need to serve your initial angular assets without requiring Basic authentication.