title: $http Service Not Invoking and No Error in Browser
body: <p>I am new to AngularJS and trying to write simple POC application, I am trying to load messages for a user but the $http service is not invoking even the controller is not loading. No errors in console. I am sure there must more easy way to implement this kindly suggest. My files are below kindly help, thanks in advance.</p>
  
  <p>app.js file</p>
  
  <pre><code>'use strict';
  
  var nkApp = angular.module("nkApp", [ 'ui.router' ]);
  
  nkApp.config(function($stateProvider, $urlRouterProvider) {
  
  $urlRouterProvider.otherwise('/home');
  
  $stateProvider.state('site', {
      'abstract' : true,
      views : {
          'navbar@' : {
              templateUrl : 'app/components/navbar/partial-navbar.html'
          },
          'content@' : {
              templateUrl : 'app/components/home/partials/partial-home.html',
              controller : 'homeCntrl'
          },
          'footer@' : {
              templateUrl : 'app/components/footer/partial-footer.html'
          }
      }
  }).state('home', {
      parent : 'site',
      url : '/home',
      views : {
          'content@' : {
              templateUrl : 'app/components/home/partials/partial-home.html',
              controller : 'homeCntrl'
          }   
      }
  }).state('messagesByUsername', {
      parent : 'site',
      url : '/trading-api/messagesByUsername',
      views : {
          'content@' : {
              templateUrl : 'app/entities/trading/messages/partials/partial-messages-by-username.html',
              controller : 'messagesByUsernameCntrl'
          }
      }
  }).state('messagesByUsername.list', {
      parent : 'site',
      url : '/trading-api/messagesByUsername/list',
      Params : {
        messages : null  
      },
      views : {
          'content@' : {
              templateUrl : 'app/entities/trading/messages/partials/partial-messages-list-by-username.html',
              controller : 'messagesListCntrl'
          }
      }
      });
  });
  </code></pre>
  
  <p>messages-by-username.html</p>
  
  <pre><code>&lt;div class="content"&gt;
  &lt;div ng-controller="messagesByUsernameCntrl"&gt;
      &lt;div class="jumbotron text-center"&gt;
          &lt;form class="form-horizontal" name="messagesFrm" novalidate&gt;
              &lt;div class="form-group form-group-lg"&gt;
                  &lt;div class="col-sm-10"&gt;
      &lt;input ng-model="username" class="form-control"         
  type="text" id="formGroupInputLarge" placeholder="User ID"&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;a ui-sref="messagesByUsername" 
  class="btn btn-primary btn-lg"&gt;GO&lt;/a&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>message-by-username-controller.js</p>
  
  <pre><code>'use strict';
  
  angular.module("nkApp").controller(
  'messagesByUsernameCntrl',
  [
      '$scope',
      '$http',
      '$state',
      '$stateParams' ,
      'messagesService',
      function($scope, $http, $state, $stateParams, messagesService) {
  
          $scope.username = "";
          $scope.messages = [];
          $scope.status = "";
          $scope.pageSize = 12;
          $scope.pageTitle = "Member Messages";
  
          $scope.getMemberByUsername = function(data) {
          console.log("Getting Messages For User : "
              + $scope.username);
          messagesService.getMemberMessagesByUsername(
              $scope.username).then(function(data) {
              console.log("Messages : " + data);
              $stateParams.messages = data;
          }, function(response) {
              console.log("Error Status : " + response.status);
              $scope.status = response.status;
          });
          }
      } ]);
  </code></pre>
  
  <p>messages-list-by-username.html</p>
  
  <pre><code>&lt;div class="content"&gt;
  &lt;h3&gt;Messages List&lt;/h3&gt;
  &lt;div ng-controller="messagesListCntrl"&gt; 
      &lt;div ng-repeat="message in messagesList"&gt;
          &lt;div class="col-sm-10 col-xs-12"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12"&gt;
                      &lt;div class="page-header section-title"&gt;{{pageTitle}}
  &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="container content col-sm-2 col-lg-12"&gt;
                      &lt;table class="row-border hover"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th width="150px"&gt;Username&lt;/th&gt;
                                  &lt;th width="150px"&gt;FirstName&lt;/th&gt;
                                  &lt;th width="150px"&gt;LastName&lt;/th&gt;
                                  &lt;th width="150px"&gt;Email&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;{{member.username}}&lt;/td&gt;
                                  &lt;td&gt;{{member.firstName}}&lt;/td&gt;
                                  &lt;td&gt;{{member.lastName}}&lt;/td&gt;
                                  &lt;td&gt;{{member.email}}&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt; 
  </code></pre>
  
  <p>messages-list-by-username-controller.js</p>
  
  <pre><code>'use strict';
  
  angular.module("nkApp").controller('messagesListCntrl',
  [ '$scope', '$stateParams', function($scope, $stateParams) {
  
      console.log("Params : " + $stateParams.messages);
      $scope.messagesList = $stateParams.messages;
  } ]);
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
    &lt;html ng-app="nkApp"&gt;
        &lt;head&gt;
      &lt;link rel="stylesheet" href="/css/app.css"&gt;
       &lt;link rel="stylesheet"    
      href="/node_modules/bootstrap/dist/css/bootstrap.min.css"&gt;
     &lt;link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap- 
      theme.min.css"&gt;
       &lt;link href="/node_modules/font-awesome/css/font-awesome.min.css" 
      rel="stylesheet"&gt;
      &lt;/head&gt;
     &lt;body&gt;   
  
  &lt;div ui-view="navbar"&gt;&lt;/div&gt;
  
  &lt;div class="container"&gt;
      &lt;div ui-view="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div ui-view="footer" class="footer"&gt;&lt;/div&gt;
  
  &lt;script src="node_modules/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/datatables/media/js/jquery.dataTables.min.js"&gt;
  &lt;/script&gt;
  &lt;script src="node_modules/angular/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/angular-ui-router/
  release/angular-ui-router.min.js"&gt;&lt;/script&gt;     
  &lt;script src="node_modules/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt; 
  
  &lt;script type="text/javascript" src="/app/app.js"&gt;&lt;/script&gt;
  
  &lt;script src="/app/components/home/controller/home-controller.js"&gt;&lt;/script&gt;      
  
  
  &lt;script src="/app/entities/trading/messages/controller/
  messages-by-username-controller.js"&gt;&lt;/script&gt;
  &lt;script src="/app/entities/trading/messages/controller/messages-list-by-
   username-controller.js"&gt;&lt;/script&gt;  
  &lt;script src="/app/entities/trading/messages/service/messages-service.js"&gt;
  &lt;/script&gt;   
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>messages-service.js</p>
  
  <pre><code>'use strict';
  
    angular.module('nkApp').factory('messagesService', [ '$http',
  
    function($http) {
  
   var service = {};
   var response = {};
  
   service.getMemberMessagesByUsername = function(username) {
   console.log("Getting Messages For User : [" + username + "]");
   response = $http.get("/trading-api/messages/" + username);
   return response;
   }
   return service;
     } ]);
  </code></pre>