title: How can I make an HTTP request using Angular.js?
body: <p>I'm trying to make an HTTP request to the Last.fm API using Angular.js but I can't get it to work. I have separated out my Angular js files and have compiled them into one single js file called scripts.js using Codekit. The order in which the files are compiled is:</p>
  
  <ul>
  <li>angular.min.js</li>
  <li>app.js</li>
  <li>controllers.js</li>
  <li>services.js</li>
  </ul>
  
  <p>Here is what my files look like:</p>
  
  <h3>app.js</h3>
  
  <pre><code>var app = angular.module('app', []);
  </code></pre>
  
  <h3>controllers.js</h3>
  
  <pre><code>app.controller('similarArtistsController', function($scope, similarArtistsService) {
  
      $scope.artists = [];
  
      similarArtistsService.getArtists().success(function(response) {
  
          console.log(response);
      });
  
  });
  </code></pre>
  
  <h3>services.js</h3>
  
  <pre><code>app.factory('similarArtistsService', function($http) {
  
      var similarArtists = {};
  
      similarArtists.getArtists = function() {
  
          return $http({
              method: 'GET', 
              url: 'http://ws.audioscrobbler.com/2.0/?method=artist.getSimilar&amp;api_key=MYLASTFMAPIKEY&amp;format=json&amp;limit=5&amp;artist=Tame+Impala'
          });
      }
  
      return similarArtists;
  });
  </code></pre>
  
  <h3>index.html</h3>
  
  <pre><code>&lt;body&gt;
  
      &lt;div ng-app="app"&gt;
  
          &lt;div ng-controller="similarArtistsController"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;script src="/js/compiled/scripts.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>In my console I see "Error: [$injector:unpr]" which I've learned to mean that the controller cannot resolve a dependency. In my case I believe it has something to with my service I'm injecting, but I don't know where the error lies.</p>