title: AngularJS: inject service into directive?
body: <p>I've been trying to integrate D3.js with Angular, and am following this tutorial:
  <a href="http://www.ng-newsletter.com/posts/d3-on-angular.html">http://www.ng-newsletter.com/posts/d3-on-angular.html</a></p>
  
  <p>The tutorial creates a d3 module which contains <code>d3Service</code>, and that gets injected into a directive. My app has a slightly different structure, but whenever I try to inject the d3 service, it shows up as <code>undefined</code> in my directive <code>link</code> function. I can inject the d3 service into my controller without issue. Here's what I'm doing:</p>
  
  <p><code>app.js</code>:</p>
  
  <pre><code>var sentimentApp = angular.module('sentimentApp', [
    'ngRoute',
    'ngSanitize',
    'sentimentAppServices',
    'sentimentAppDirectives',
    'sentimentAppControllers'
  ]);
  </code></pre>
  
  <p>Within <code>services.js</code>, I have several services, one of which is d3:</p>
  
  <pre><code>var sentimentAppServices = angular.module('sentimentAppServices', ['ngResource'])
  // other services
  .factory('d3', [function(){
    var d3;
    d3 = // d3 library code here
    return d3; 
  }]);
  </code></pre>
  
  <p>Now in <code>directives.js</code>:</p>
  
  <pre><code>var sentimentAppDirectives = angular.module('sentimentAppDirectives', ['sentimentAppServices']);
  
  sentimentAppDirectives.directive('lsPieChart', ['d3', function($compile, d3){
     return {
       // scope &amp; template
       link: function($scope, elem, attr, ctrl) {
         console.log(d3); // undefined
       }
     }
  </code></pre>
  
  <p>Any tips? Thanks.</p>