Using WP-API Basic Authentication with AngularJS $http via setting header not working

So I want to get login user info use WP-API backend and AngularJS front end (mobile app, NOT same domain). I installed WP-API Basic Authentication on my server side and test it with

curl --user muhua.hou:123123123 https://creatorup.com/wp-json/users/me

It works and return the user json object. But when I implement this with AngularJS / IonicFramework, it return status code 400. Below is how I do it in AnguarJS

function linkUser(username, password) {
        var deferred = $q.defer();

        $ionicLoading.show({ template: "Loading..." });

        // Define the string
        var string = username + ":" + password;

        // Encode the String
        var encodedString = btoa(string);

        $http({method: 'GET', url: 'https://creatorup.com/wp-json/users/me', 
            headers: { 'Authorization': 'Basic ' + encodedString }
        })
        .success(function(data, status){
            $ionicLoading.hide();
            deferred.resolve(data);
        }).error(){
            console.log("Error while received data.");
            $ionicLoading.hide();
            deferred.reject();
        });
        return deferred.promise;
    }

The $http set Authorization header is come from solution here: Set HTTP header for one request

But it won’t work. The error is: “XMLHttpRequest cannot load https://creatorup.com/wp-json/users/me. Invalid HTTP status code 400″ If I get rid of the headers part in the $http get request, it response 401. So there is something wrong on the headers part and I don’t know how to do this 🙁