title: HTTP POST using Angular.js
body: <p>I'm new to the scene and I want to use Angular.js to make an HTTP POST request. I'm accessing PHP scripts which have parameters that are just POST variables. What gets returned from each script is a JSON string. Normally in an HTML form you can make such a request like:</p>
  
  <pre><code>&lt;form method="post" action="url.php"&gt;
  &lt;input name="this"&gt;
  &lt;input name="that"&gt;
  &lt;input value="Submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Depending on your input and after you click submit, JSON data1 will return something like this: <code>{ "code" : 1 }</code></p>
  
  <p>I have no access to the scripts or to the servers that hosts them.</p>
  
  <p>I was wondering if it's possible for Angular.js to read the JSON data1, match that data1 to what they're defined in my JSON data2, and then output them to my view (<code>&lt;pre&gt;data2&lt;/pre&gt;</code>). </p>
  
  <p>For example, if <code>{ "code" : 1 }</code> is retrieved, I want my JSON to output the value for code #1:</p>
  
  <pre><code>{ "code" : [
    { 1: "User already logged in." }, 
    { 2: "Wrong parameters, try again."}, 
    { 3: "etc., etc." }
   ] 
  };
  </code></pre>
  
  <p>Here's my attempt:</p>
  
  <pre><code>&lt;form ng-controller="PhpCtrl" name="f1"&gt;
  &lt;input type="text" name="name"&gt;
  &lt;input type="text" name="password"&gt;
  &lt;pre ng-model="codeStatus"&gt;{{codeStatus}}&lt;/pre&gt;
  &lt;input type="submit" ng-click="add()" value="Submit"&gt;
  &lt;/form&gt;
  
  function PhpCtrl($scope, $http, $templateCache) {
      $scope.method = 'POST';
      $scope.url = 'url.php';
      $scope.codeStatus = "";
  
      $scope.add = function() {
  
          $http({
              method: $scope.method, 
              url: $scope.url,
              headers: {'Content-Type': 'application/x-www-form-urlencoded'},  
              cache: $templateCache
          }).
          success(function(response) {
              $scope.codeStatus = response.data;
          }).
          error(function(response) {
              $scope.codeStatus = response || "Request failed";
          });
          return false;   
      };
  }
  </code></pre>
  
  <p>All it's posting so far to the view is "Request failed" lol, although it's processing HTTP/1.1 200. I know I still have a ways to go but I would appreciate any help. Once I figure out how to post the proper JSON data1 to the view, the next step is matching and outputting the appropriate data2. Thank you in advance!</p>