title: AngularJS: Why does my controller get 'undefined' from my service call?
body: <p><strong>Question:</strong> My service is retrieving the proper information, so why isn't my controller getting data from my service?</p>
  
  <p><strong>Service</strong>: This is the code my controller (and eventually other things) calls.</p>
  
  <pre><code>// search.service.js
  (function () {
      'use strict';
  
      angular.
          module('trips').
          factory('SearchService', SearchService);
  
      SearchService.$inject = ['BoatList'];
  
      function SearchService(BoatList) {
          var service = {
              getBoatList: getBoatList
          };
  
          return service;
  
          //////////////////////
  
          function getBoatList() {
              BoatList.query()
                  .$promise
                  .then(function (data) {
                      console.log(data);
                      return data;
                  })
                  .catch(function (error) {
                      return error;
                  })
          }
      }
  })();
  </code></pre>
  
  <p><strong>Console Information</strong>: </p>
  
  <p>This is why I'm so confused. The service logs <code>Array[7]</code> to the console as part of the <code>.then()</code> in the API call. The array contains the data I want. I can't seem to access it in the controller for some reason. When I run through it with the debugger I get <code>'undefined'</code>.</p>
  
  <p><strong>Controller</strong>: When I call the same code as is in the service's  <code>getBoatList</code> everything works just fine. When I try to access the return data from <code>activate()</code> I don't get any errors, just <code>'undefined'</code>.</p>
  
  <pre><code>//search.controller.js
  (function () {
      'use strict';
  
      angular.
          module('trips').
          controller('SearchController', SearchController);
  
      SearchController.$inject = ['$stateParams', 'SearchService'];
  
      function SearchController($stateParams, SearchService) {
          var vm = this;
  
          vm.boatList = null;
  
          activate();
  
          ////////////////////
  
          function activate() {
              vm.boatList = SearchService.getBoatList();
          }
      }
  })();
  </code></pre>
  
  <p><strong>Recap</strong>: My service gets the correct data and logs it to the console. My controller isn't getting the same information by calling the service. How can I fix it, and what misunderstanding is causing me this problem?</p>