title: AngularJS directive not being called
body: <p>I'm trying to implement a d3 directive in Angular, and it's hard because visually nothing is happening, and no errors are being thrown on the console.</p>
  
  <p>Here's my d3 directive:</p>
  
  <pre><code>myApp.directive('d3-bars', ['d3Service', function($window, d3Service) {
    return {
      restrict: 'EA',
      scope: {},
      link: function(scope, element, attrs) {
  
  // More code below ....
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;d3-bars bar-height="20" bar-padding="5"&gt;&lt;/d3-bars&gt;
  </code></pre>
  
  <p>At first I thought it wasn't appending an <code>svg</code>, because inspecting the element that's what it looks like, but now I don't think the directive is even running at all.  I stuck a <code>console.log</code> inside of it at the very beginning and it didn't appear either.  Am I missing something simple?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I tried changing the top line to </p>
  
  <pre><code>angular.module('myApp.directives', ['d3'])
  .directive('d3-bars', ['d3Service', function($window, d3Service) {
  </code></pre>
  
  <p>But that didn't work either.  I don't even know what's the difference between the two headers anyway...</p>