title: Angular service causing an error
body: <p>I'm trying to receive data using <code>$http</code> as a dependency injection, then assign that data to a promise using angular's <code>$q</code> service. I'm doing something wrong.. can't seem to locate where.</p>
  
  <p><strong>Service</strong>:</p>
  
  <pre><code>myApp.factory('githubApi', ['$http', '$q',
      function($http, $q) {
          var deferred = $q.defer();
          //Declaring a promise that will or will not return a users github information.
          this.accountInformation = function (){
              return $http.get('https://api.github.com/users/joshspears3')
              .then(function(response){
                  deferred.resolve(response);
                  return deferred.promise;
              }, function(response){
                  deferred.reject(response);
                  return deferred.promise;
              })
          }
      }
  ]);
  </code></pre>
  
  <p><strong>Controller</strong>:</p>
  
  <pre><code>myApp.controller('githubCtrl', [ 'githubApi', '$q', '$scope',
      function(githubApi, $q, $scope){
          githubApi.accountInformation()
          .then(
              function (result) {
                  $scope.data = result;
              }, function (error) {
                  // handle errors here
                  console.log(error.statusText);
              }
          );
      }
  ]);
  </code></pre>
  
  <p><strong>Directive</strong>:</p>
  
  <pre><code>myApp.directive('githubRequest', [
      function() {
          return {
              scope: {},
              restrict: 'E',
              controller: 'githubCtrl',
              templateUrl: 'public/views/partials/github-request.html'
          }
      }
  ]);
  </code></pre>
  
  <p><strong>Partial</strong> (github-request.html):</p>
  
  <pre><code>&lt;p class="component-example-header"&gt;Creating a service. Making a $http request to grab my personal Github information.&lt;/p&gt;
  &lt;div class="service-message"&gt;
      &lt;p&gt;Avatar:&lt;/p&gt;
      &lt;img width="20%" src="{{data.avatar_url}}" alt="" /&gt;
      &lt;p&gt;Username: &lt;span ng-bind="data.login"&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;p&gt;Followers: &lt;span ng-bind="data.followers"&gt;&lt;/span&gt;, Following: &lt;span ng-bind="data.following"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  </code></pre>
  
  <p>This is the <strong>error</strong> that the browser is throwing:</p>
  
  <pre><code>Error: [$injector:undef] http://errors.angularjs.org/1.4.4/$injector/undef?p0=githubApi
      at Error (native)
      at http://localhost:9999/bower_components/angular/angular.min.js:6:416
      at Object.$get (http://localhost:9999/bower_components/angular/angular.min.js:37:32)
      at Object.e [as invoke] (http://localhost:9999/bower_components/angular/angular.min.js:39:96)
      at http://localhost:9999/bower_components/angular/angular.min.js:40:410
      at d (http://localhost:9999/bower_components/angular/angular.min.js:38:308)
      at Object.e [as invoke] (http://localhost:9999/bower_components/angular/angular.min.js:39:64)
      at Q.instance (http://localhost:9999/bower_components/angular/angular.min.js:80:151)
      at K (http://localhost:9999/bower_components/angular/angular.min.js:61:140)
      at http://localhost:9999/bower_components/angular/angular.min.js:68:475
  </code></pre>
  
  <p>It's saying that my githubApi service is undefined when I inject it into my dependencies for possibly my controller?</p>