title: AngularJS - SOAP Service Integration With AngularJS Model
body: <p>I am a seasoned Flex Developer that is learning AngularJS. This is so confusing!!! </p>
  
  <p>Anyway, I am trying to make a service call to my backend (on the same domain) server via a SOAP WSDL Request, and populate the data with an AngularJS model object. I was trying Ajax but was having some issues with getting the actual data back. I think there is something wrong with the way I created the SOAP tag. I was getting a successful response back, but no data. </p>
  
  <p>After not being able to figure out the Ajax method, I came across soapclient.js and found it to be extremely easy, with less code than Ajax. soapclient.js does most of the work for you, similar to the Ajax method, which makes much less code. Additionally, using soapclient.js I am able to make the SOAP call and also get data back the XML formatted response.</p>
  
  <p><a href="http://javascriptsoapclient.codeplex.com">http://javascriptsoapclient.codeplex.com</a> </p>
  
  <p>My issue is that I am trying to use AngularJS to dump the XML response into an AnularJS model object. I am not sure how to setup the AngularJS project for what I am doing, but I would really like to know the best method in order to keep what I am working on decoupled. I have been searching Google like crazy, but most examples seem overly complicated for a beginner.</p>
  
  <p>Here is what I have:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script language="JavaScript" type="text/javascript" src="jquery-1.10.1.js"&gt;&lt;/script&gt;
      &lt;script language="JavaScript" type="text/javascript" src="soapclient.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          function getData() {
              var url2 = "https://myService";
              var pl = new SOAPClientParameters();
  
              pl.add("arg0", false);
  
              SOAPClient.invoke(url2, "methodToCall", pl, true, getDataCallback);
          }
  
          function getDataCallback(r, soapResponse) {
              alert(r.contents.payeeMailName);
          }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form&gt;
      &lt;input type="button" value="Click Here to Call Web Service" onClick="getData()" style="width: 192px"&gt;
  &lt;/form&gt;
  &lt;div id="result"&gt;Result?&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now, the SOAP service returns the data like this:</p>
  
  <pre><code> &lt;return&gt;
      &lt;contents&gt;
         &lt;eftAcctType&gt;S&lt;/eftAcctType&gt;
         &lt;id&gt;
            &lt;djNumber&gt;201-16-39063&lt;/djNumber&gt;
            &lt;djSequence&gt;1&lt;/djSequence&gt;
         &lt;/id&gt;
         &lt;payeeAddrLine1&gt;124 Agate Drive&lt;/payeeAddrLine1&gt;
      &lt;/contents&gt;
      &lt;contents&gt;
         &lt;eftAcctType/&gt;
         &lt;id&gt;
            &lt;djNumber&gt;201-16-39201&lt;/djNumber&gt;
            &lt;djSequence&gt;1&lt;/djSequence&gt;
         &lt;/id&gt;
         &lt;payeeAddrLine1&gt;c/o Kevin Martinez, Attorney at Law&lt;/payeeAddrLine1&gt;
      &lt;/contents&gt;
      &lt;contents&gt;
         &lt;eftAcctType&gt;C&lt;/eftAcctType&gt;
         &lt;id&gt;
            &lt;djNumber&gt;201-16-38561&lt;/djNumber&gt;
            &lt;djSequence&gt;1&lt;/djSequence&gt;
         &lt;/id&gt;
         &lt;payeeAddrLine1&gt;1360 South Highway 191&lt;/payeeAddrLine1&gt;
      &lt;/contents&gt;
      &lt;status&gt;0&lt;/status&gt;
   &lt;/return&gt;
  </code></pre>
  
  <p>What is the "proper" way in AngularJS to make the service call, assuming the way I did it is ok, if not let me know the best way, and then in the result, how do I loop through the data in the XML response and parse it into an Angular model object? I eventually want to use this data in a DataGrid.</p>
  
  <p>Any help will be much appreciated.</p>