400 Bad Request for $http post method

[admin]

While using the following code, I get

<blockquote>
400 Bad request rest_missing_callback_params
</blockquote>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override">

$scope.signUp = function () {
    var data = {
     email: $scope.email,
     password: $scope.password,
     first_name: $scope.fName,
     last_name: $scope.lName,
     username: $scope.uName,
     billing: {
      first_name: $scope.fName,
      last_name: $scope.lName,
      company: $scope.cName,
      address_1: $scope.address1,
      address_2: $scope.address2,
      city: $scope.city,
      state: $scope.state,
      postcode: $scope.pcode,
      country: $scope.country,
      email: $scope.email,
      phone: $scope.mobile,
     },
     shipping: {
      first_name: $scope.fName1,
      last_name: $scope.lName1,
      company: $scope.cName1,
      address_1: $scope.address11,
      address_2: $scope.address12,
      city: $scope.city1,
      state: $scope.state1,
      postcode: $scope.pcode1,
      country: $scope.country1,
     }
    }

    console.log(data)
    $http.post("https://www.colourssoftware.com/wordpress/wp-json/wc/v1/customers", {
      headers: {
       'Content-Type': 'application/json',
       'Authorization': 'Basic ' + window.btoa("username:password")
      },
      data: data
     })
     .then(function (response) {
      console.log(response)
     }, function (response) {
      console.log(response);
     });
}

</div>
</div>


But when I use the following code, it posts the data to the server.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override">

var au = window.btoa("username:password"),
    req = {
     method: 'POST',
     url: 'https://www.colourssoftware.com/wordpress/wp-json/wc/v1/customers',
     headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Basic ' + au
     },
     data: data
    }

$http(req).then(function (response) {
 console.log(response)
}, function (response) {
 console.log(response);
});

</div>
</div>


What is the difference between these two? Why does it happen like so?