title: Consume WCF Webservice with angular/javascript
body: <p>I'm implementing a server with WCF and trying to reach its rest services using a client developed with Angular.</p>
  
  <p>Here is the service : </p>
  
  <pre><code> public interface IConnexion
  
  {
  
  [OperationContract]
  [WebGet(UriTemplate = "Connexion/{login}/{mdp}", ResponseFormat = WebMessageFormat.Json)]
  Utilisateur Connexion(string login, string mdp);
  
  [OperationContract]
  [WebInvoke(UriTemplate = "Deconnexion/{id_user}", RequestFormat = WebMessageFormat.Json)]
  void Deconnexion(string id_user);
  </code></pre>
  
  <p>}</p>
  
  <p>And my function trying to reach the service : </p>
  
  <pre><code> app.service('serverConnexionServices', function(userService, serverConfigService) {
  
          this.Connexion = function(login, pass)
          {
              var uri = this.getServerUri() + "Connexion/"+login+"/"+CryptoJS.MD5(pass);
  
              var promises = $http.get(uri)
          .success(function(data, status, headers, config) {
              // this callback will be called asynchronously
              // when the response is available
              return data;
          }).
          error(function(data, status, headers, config) {
              // called asynchronously if an error occurs
              // or server returns response with an error status.
              return "";
          });
  
  return promises;
          };
      });
  </code></pre>
  
  <p>my form's controller:</p>
  
  <pre><code> app.directive('loginContent', function(userService, serverConnexionServices){
                  return{
                      restrict : 'E',
                      templateUrl : "includes/home/login-content.html",
                      controllerAs: "loginController",
                      controller: function($scope, userService, serverConnexionServices) {
  
                      var IsSubmitEnabled = true;
                      this.errors = "";
  
                      this.validateLogin = function(user) { // Calling the service
                          this.IsSubmitEnabled = false; // To avoid more than one click while checking on the server
                          var retour = serverConnexionServices.TryConnection(user).then(function(promise) {
                          alert('promise:'+retour);
                          if(promise.length &gt; 0)
                          { // There is an error so we show a message to the user
                              this.promise= retour;
                          }
                              this.IsSubmitEnabled = true;
                              user = {};
      });
                          };
  
                          }
                      }
              });
  </code></pre>
  
  <p>But when I try to open my client the alert box  appears before the breakpoint is raised in Visual Studio (I put the breakpoint on the first line of my "Connexion" function. So it means the server has not answered yet to the request but the $http.get() has already sent its answer. So the result object doesn't contain what the server is sending. According to Angular's documentation, the response will be sent asynchronously. But How can I force my request to wait the answer ?</p>
  
  <p>My controller now gets the answer from the server but it doesn't update the view, and if I try to call manually $scope.$apply() I get the error "$digest already in progress". How can I force my view to refresh itself ? (I noticed that if I put this.errors = "aaa"; once the "then" is closed, my view is refreshed and whos "aaa", I've also checked that errors.length > 0 with an alert message)</p>
  
  <p>My view : </p>
  
  <pre><code>&lt;div ng-show="loginController.errors.length &gt; 0" class="alert alert-danger" role="alert" style="display: inline-block;"&gt;&lt;span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"&gt;&lt;/span&gt;{{loginController.errors}}&lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>: I can now reach my breakpoint in the implementation of <code>Connexion</code> in Visual Studio but still the answer from the server is not what is expected</p>
  
  <p><strong>EDIT2</strong> : I've added my controller which needs the refresh.</p>
  
  <p><strong>EDIT3</strong> : Ok, I updated my code, I needed to put a "then" function on my controller's call and my controller now get the answer. However my view doesn't update itself on errors. It should set the div visibility to true but the async call seems to block it. I've tried to use apply() and digest() without success. Could you help me on this ?</p>