how to prevent browsers authentication dialog angularjs

I solved my this issue following this tutorial.

But I came across the another problem. I applied this tutorial to my application after that all request can send csrf token header. But browser open custom authentication dialog popup. And I can't actually logged out. After I logged out interceptor keep going send token header.

here is my app.config :

var app = angular.module('app', ['ngRoute']);

app.factory('CsrfTokenInterceptorService', ['$q',
function CsrfTokenInterceptorService($q) {

    // Private constants.
    var CSRF_TOKEN_HEADER = 'X-CSRF-TOKEN',
        HTTP_TYPES_TO_ADD_TOKEN = ['DELETE', 'POST', 'PUT'];

    // Private properties.
    var token;

    // Public interface.
    var service = {
        response: onSuccess,
        responseError: onFailure,
        request: onRequest,
    };

    return service;

    // Private functions.
    function onFailure(response) {
        if (response.status === 403) {
            console.log('Request forbidden. Ensure CSRF token is sent for non-idempotent requests.');
        }

        return $q.reject(response);
    }

    function onRequest(config) {
        if (HTTP_TYPES_TO_ADD_TOKEN.indexOf(config.method.toUpperCase()) !== -1) {
            config.headers[CSRF_TOKEN_HEADER] = token;
        }

        return config;
    }

    function onSuccess(response) {
        var newToken = response.headers(CSRF_TOKEN_HEADER);

        if (newToken) {
            token = newToken;
        }

        return response;
    }
}]);

  app.config(function($routeProvider,$httpProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            })
            .when('/home', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
                            })
            .when('/about', {
                templateUrl : 'pages/about.html',
                controller  : 'aboutController'
            })

            // route for the login page
            .when('/login', {
                templateUrl : 'pages/login.html',
                controller  : 'mainController'
            })
            .when('/helpRequest', {
                templateUrl : 'pages/helpRequest.html',
                controller  : 'helpRequestController'
            })
            .when('/queryHelpRequest', {
                templateUrl : 'pages/helpQueryPage.html',
                controller  : 'helpQueryController'
            });
            $httpProvider.defaults.xsrfHeaderName = 'X-CSRF-TOKEN';
            $httpProvider.interceptors.push('CsrfTokenInterceptorService');
    });


   app.controller('mainController', function($rootScope, $scope, $http, $location) {


  var authenticate = function(credentials, callback) {

    var headers = credentials ? {authorization : "Basic "
        + btoa(credentials.username + ":" + credentials.password)
    } : {};

    $http.get('user', {headers : headers}).success(function(data) {
      if (data.name) {
        $rootScope.authenticated = true;
      } else {
        $rootScope.authenticated = false;
      }
      callback && callback();
    }).error(function() {
      $rootScope.authenticated = false;
      callback && callback();
    });

  }

  authenticate();
  $scope.credentials = {};
  $scope.login = function() {
      authenticate($scope.credentials, function() {
        if ($rootScope.authenticated) {
          $location.path("/home");
          $scope.error = false;
        } else {
          $location.path("/login");
          $scope.error = true;
        }
      });
  };

  $scope.logout = function() {
    $http.post('logout').success(function() {
      $rootScope.authenticated = false;
      $location.path("/home");
    }).error(function(data) {
      $rootScope.authenticated = false;
    });
  }



  });

here is my login.html:

<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
    <div class="panel panel-info" >
        <div class="panel-heading">
            <div class="panel-title">Giriş Yap</div>
            <p>{{ message }}</p>
            <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Şifremi unuttum?</a></div>
        </div>

        <div style="padding-top:30px" class="panel-body" >

            <div>
                <form id="loginform" class="form-horizontal"
                      role="form" ng-submit="login()">

                    <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input id="loginUsername" type="text" class="form-control"
                               ng-model="credentials.username" name="username" value="" placeholder="E-POSTA"/>
                    </div>

                    <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input id="loginPassword" type="password" ng-model="credentials.password" class="form-control" name="password" placeholder="ŞİFRE"/>
                    </div>

                    <div style="margin-top:10px" class="form-group">
                        <!-- Button -->

                        <div class="col-sm-12 controls">
                            <input type="submit" id="btn-login"
                                   class="btn btn-success" value="Giriş Yap"/>
                        </div>
                    </div>
                </form>
            </div>
            <div  id="login-alert" class="alert alert-danger col-sm-12" ng-show="error">
                <p  class="error">Kullanıcı Adı veya Şifre Hatalı</p>
            </div>

        </div>
    </div>
</div>

How can I prevent browsers authentication dialog? Could you help me please?