title: AngularJS $http call response not updating on the view
body: <p>I am doing a $http call, after the call, I am getting error response which has
  to be shown on the view, I could see the error message in console log but its
  not showing on the view.
  I am assigning error message on the $scope to a variable and interpolating
  the same on view</p>
  
  <p>Below is the service part of the $http call</p>
  
  <pre><code>userService.getUser = function(searchByNum){
          var q = $q.defer();
  
          $http({
              method:'GET',
              url :'http://localhost:8083/simpro1/helloRest/user/'+searchByNum
          }).success(function(response){
  
              userService.user=response;
              q.resolve(response);
          }).error(function(error){
  
              userService.errors = error;
              q.reject(error);
          })
  
          return  q.promise;
      }
  </code></pre>
  
  <p>Below is the controller part</p>
  
  <pre><code>$scope.getDetails = function(searchByNum){
  
            userService.getUser(searchByNum)
            .then(function(res){
                console.log(res);
            },function(error){
  
                **$scope.errMessages = userService.errors.errMessage;**
            })
        }
  </code></pre>
  
  <p>In the above error block assigning the message to variable $scope.errMessages
   but the same is not updated on the view but I could see the error message
   on console.</p>
  
  <p>Could some one help me with this please....</p>
  
  <p>below is the view which {{errMessages}} variable</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
  
      &lt;title&gt;Jumbotron Template for Bootstrap&lt;/title&gt;
  
  
    &lt;body ng-controller="contactHomeCtrl"&gt;
  
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;div&gt;
              &lt;a class="navbar-brand" href="#"&gt;{{username | capitalizeFirstLetter }}&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="navbar" text-align="right"  class="navbar-collapse collapse"&gt;
              &lt;a class="navbar-brand"  href="#" ng-click="logout()"&gt;Logout&lt;/a&gt;
          &lt;/div&gt;
           &lt;div&gt; &lt;/div&gt;
  
  
      &lt;!-- Main jumbotron for a primary marketing message or call to action --&gt;
      &lt;div class="jumbotron"&gt;
        &lt;div class="container"&gt;
          &lt;h1&gt;U R Fired&lt;/h1&gt;
          &lt;p&gt;This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.&lt;/p&gt;
          &lt;p&gt;
          &lt;div has-permission = "['administration', 'ROLE_ADMIN']"&gt;
            &lt;a class="btn btn-primary btn-lg" ui-sref="#" role="button"&gt;Learn more &amp;raquo;&lt;/a&gt;
          &lt;/div&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="container"&gt;
        &lt;!-- Example row of columns --&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-4"&gt;
              &lt;h5&gt;Enter the Number to Search&lt;/h5&gt;
              &lt;div ui-view="contactByNumber"&gt;&lt;/div&gt;   
              &lt;/div&gt;
  
           &lt;div class="col-md-4"&gt;
  
            **&lt;div&gt;{{errMessages}} &lt;/div&gt;**
         &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
  
            &lt;div&gt;&lt;/div&gt;
         &lt;/div&gt;
  
  
        &lt;hr&gt;
  
        &lt;footer&gt;
  
        &lt;/footer&gt;
      &lt;/div&gt; &lt;!-- /container --&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  
  
  console.log("error message"+userService.errors.errMessage); results in 
  No Customer is found with Id
  
  console.log("error Object"+JSON.stringify(error)); results in complex object      
  with all the html messages this is also a failure message
  </code></pre>