Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://code.angularjs.org/1.2.24/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl">
    <d3-directed-graph owner="owner" on-click="goTo(location);" readonly="true" data="owner.data" label="title"></d3-directed-graph>
</div>

CSS

svg {
  background-color: #FFF;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

svg:not(.active):not(.ctrl) {
  cursor: move;
}

path.link {
  fill: none;
  stroke: lightgray;
  stroke-width: 4px;
  cursor: default;
}

svg:not(.active):not(.ctrl) path.link {
  cursor: pointer;
}

path.link.selected {
  stroke-dasharray: 10,2;
}

path.link.dragline {
  pointer-events: none;
}

path.link.hidden {
  stroke-width: 0;
}

circle.node {
  stroke-width: 1.5px;
  cursor: pointer;
}

circle.node.reflexive {
  stroke: darkgray !important;
  stroke-width: 2.5px;
}

text {
  font: 12px sans-serif;
  pointer-events: none;
}

text.id {
  text-anchor: middle;
  font-weight: bold;
}

JavaScript

'use strict';

angular.module('d3', [])
    .factory('d3Service', ['$document', '$window', '$q', '$rootScope', function ($document, $window, $q, $rootScope) {
    var d = $q.defer(),
        d3service = {
            d3: function () {
                return d.promise;
            }
        };

    function onScriptLoad() {
        // Load client in the browser
        $rootScope.$apply(function () {
            d.resolve($window.d3);
        });
    }
    var scriptTag = $document[0].createElement('script');
    scriptTag.type = 'text/javascript';
    scriptTag.charset = 'utf-8';
    scriptTag.async = true;
    scriptTag.src = 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js';
    scriptTag.onreadystatechange = function () {
        if (this.readyState == 'complete') onScriptLoad();
    }
    scriptTag.onload = onScriptLoad;

    var s = $document[0].getElementsByTagName('body')[0];
    s.appendChild(scriptTag);

    return d3service;
}])
    .config(['$provide', function ($provide) {

    var customDecorator = function ($delegate) {
        var d3Service = $delegate;
        d3Service.d3().then(function (d3) {
            // build our custom functions on the d3
            // object here
        });

        return d3Service; // important to return the service
    };

    $provide.decorator('d3Service', customDecorator);
}])
    .directive('d3DirectedGraph', ['$window', '$timeout', 'd3Service', function ($window, $timeout, d3Service) {
    return {
        restrict: 'EA',
        scope: {
            owner: '=',
            data: '=',
            label: '@',
            readonly: '@',
            onClick: '&'
        },
        link: function (scope, ele, attrs) {
            // console.log('scope', scope);
            console.log('scope', scope);

            var checkTrue = function (value) {
                if (value === 'true' || value === true || value === 1 || value === '1') return true;
                return false;
            }
           ...