title: Basic jquery fiddle to Angular Directive
body: <p>Here is a jQuery fiddle I'm trying to port into an Angular directive: <a href="http://jsfiddle.net/rhtr1w04/" rel="nofollow">http://jsfiddle.net/rhtr1w04/</a></p>
  
  <p>And here is my
  app.js</p>
  
  <pre><code>angular.module('app',[]).directive('angular-arc', function() {
    return {
      restrict: 'E',
      link: function(scope, element, attrs) {
        var renderer;
        renderer = new Highcharts.Renderer(
          $('angular-arc')[0],
          400,
          300
        );
  
        renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({
          fill: '#FCFFC5',
          stroke: 'black',
          'stroke-width': 1
        }).add();
      }
    };
  })
  </code></pre>
  
  <p>and my index.html (with all proper includes to app.js and jquery)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;script src="//code.jquery.com/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
    &lt;script src='app.js'&gt;&lt;/script&gt;
  &lt;/HEAD&gt;
  &lt;BODY ng-app="app"&gt;
    &lt;angular-arc /&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>However, of course, it doesn't render. Have I used the DDO correctly? What should I include to make this render? Thanks in advance.</p>