D3.JS for Graphs in Angular: adding controller to app.js - angularjs

Question

I'm looking to implement the following pieces of code into my angular boiler plate. I'm a bit new to the framework, so some patience is appreciated!
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp">
<bars data="40,4,55,15,16,33,52,20"></bars>
</div>
.chart {
background: #eee;
padding: 3px;
}
.chart div {
width: 0;
transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 5px;
color: white;
box-shadow: 2px 2px 2px #666;
}
angular.module('myApp', []).
directive('bars', function ($parse) {
return {
restrict: 'E',
replace: true,
template: '<div id="chart"></div>',
link: function (scope, element, attrs) {
var data = attrs.data.split(','),
chart = d3.select('#chart')
.append("div").attr("class", "chart")
.selectAll('div')
.data(data).enter()
.append("div")
.transition().ease("elastic")
.style("width", function(d) { return d + "%"; })
.text(function(d) { return d + "%"; });
}
};
});
Which are the HTML, CSS and JS code excerpts for the graph only. I'm looking to implement this into my code, which is easy enough for the HTML/CSS (I've added a new div and style sheet in my header of my index.html).
I'm wondering how I would go about adding the JS bit of code to my app.js. My existing code already lists several modules, but no var app = angular.module('myApp', ['zingchart-angularjs']); type statement.
When I simply copy my code above in, I don't see any graph appear on my webpage.
Any help appreciated - thanks!