Moved api call to a service

frontend/app/js/homeController.js

@@ -1,17 +0,0 @@
-app.controller("homeController", function($scope, $http) {
-    $scope.message = "Test message in scope.";
-    
-    
-    $http({
-      method: 'GET',
-      url: '/api/tournaments/'
-    }).then(function successCallback(response) {
-        // this callback will be called asynchronously
-        // when the response is available
-        $scope.query =  response.data;
-      }, function errorCallback(response) {
-        // called asynchronously if an error occurs
-        // or server returns response with an error status.
-        $scope.query =  "Nothing there";
-      });
-});

frontend/app/js/tournaments-controller.js

@@ -0,0 +1,10 @@
+app.controller("tournamentsController", function($scope, tournamentsService) {
+    $scope.message = "Test message in scope.";
+    tournamentsService.getAllTournaments().then(function(data) {
+       //this will execute when the 
+       //AJAX call completes.
+       console.log(data);
+       $scope.allTournaments = data;
+   });
+    
+});

frontend/app/js/tournaments-service.js

@@ -0,0 +1,17 @@
+app.factory('tournamentsService', function($http){
+
+   
+   return {
+     getAllTournaments: function() {
+       //since $http.get returns a promise,
+       //and promise.then() also returns a promise
+       //that resolves to whatever value is returned in it's 
+       //callback argument, we can return that.
+       return $http.get('/api/tournaments/').then(function(result) {
+           return result.data;
+       });
+     }
+    };
+
+});
+

frontend/app/pages/index.us

@@ -35,7 +35,7 @@
               			      <!--leftsidebar-->
               		      </div>
                         <div class="col-md-8" style="padding-left: 2%;">
-                            <div class="container" ui-view="main" ng-controller="homeController">
+                            <div class="container" ui-view="main" ng-controller="tournamentsController">
                               <h2>All Tournaments</h2>
                               <br>
                               <table class="table">
@@ -49,7 +49,7 @@
                                   </tr>
                                 </thead>
                                 <tbody>
-                                  <tr ng-repeat="tournament in query">
+                                  <tr ng-repeat="tournament in allTournaments">
                                       <td>{{ tournament.name }}</td>
                                       <td>{{ tournament.address }}</td>
                                       <td>{{ tournament.director }}</td>
@@ -65,7 +65,6 @@
             		      </div>
                     </div>
                   </div>
-            </div>
         </body>
         
         <!-- Latest compiled and minified JavaScript -->