title: TypeError: Cannot read property 'getAccounts' of undefined
body: <p>I'm following John Papa's Angular Style guide for creating a small application, and I can't seem to work out an issue with the <code>controller</code> using a method from a <code>service</code>...</p>
  
  <p><strong>module</strong></p>
  
  <pre><code>(function () {
      'use strict';
      var accountsApp = angular.module('accountsApp', ['ui.bootstrap', 'ngAnimate']);
  })();
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>(function() {
      'use strict';
  
      angular
          .module('accountsApp')
          .controller('accountsCtrl', accountsCtrl);
  
      accountsCtrl.$inject = ['$log'];
  
      function accountsCtrl($log, accountsDataSvc) {
          /* jshint validthis:true */
          var vm = this;
          vm.title = 'Accounts';
          vm.accounts = [];
          vm.accountForm = null;
          vm.account = { id: 0, name: '', description: '' }
  
          activate();
  
          function activate() {
              return getAccounts(1).then(function() {
                  $log.info('Accounts loaded');
              });
          }
  
          function getAccounts(id) {
              return accountsDataSvc.getAccounts(id).then(function(data) { //error here
                  vm.accounts = data;
                  return vm.accounts;
              });
          }
      }
  })();
  </code></pre>
  
  <p><strong>Service</strong></p>
  
  <pre><code>(function () {
      'use strict';
  
      angular
          .module('accountsApp')
          .factory('accountsDataSvc', accountsDataSvc);
  
      accountsDataSvc.$inject = ['$http', '$log'];
  
      function accountsDataSvc($http, $log, $q) {
  
          var uri = '***';
  
          var service = {
              getAccounts: accounts
          };
  
          return service;
  
          //////////////////////
  
          function accounts(userId) {
              $log.info(uri + userId + ' called');
              return $http.get(uri + userId)
                  .then(getAccountsComplete)
                  .catch(function (message) {
                      $log.error('XHR Failed for getAccounts ' + message);
                  });
  
              function getAccountsComplete(data, status, headers, config) {
                  return data.data[0].data.results;
              }
          }
      }
  })();
  </code></pre>
  
  <p>When I run the application, I get the error <strong>TypeError: Cannot read property 'getAccounts' of undefined</strong> within the controller, but I can't see where I have gone wrong - any assistance would be much appreciated.</p>