Angular:Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="http://d3js.org/d3.v2.js"></script>
 <div ng-app="myApp" ng-controller="Ctrl">
            <h2>Intergrating Angular JS with D3J</h2>
            <bars-chart chart-data="myData"></bars-chart>
        </div>

JavaScript

var myApp = angular.module('myApp',[]);
myApp.directive('barsChart', function($parse) {

    var directiveDefinitionObject = {
        restrict: 'E',
        replace: false,
        scope: {data: '=chartData'},
        link: function(scope, element, attrs) {

            var chart = d3.select(element[0])
                    .selectAll("ul")
                    .data(scope.data)
                    .enter()
                    .append("li")
                    .text(function(d) {
                return d;
            });
        }
    };
    return directiveDefinitionObject;
});







function Ctrl($scope,$q,$http)
{
    var url = "https://spreadsheets.google.com/feeds/list/0AsXjbsnPIu06dGswZUV4WXV4cVVGT1FvU0N2cmM2LWc/od6/public/values?alt=json-in-script&callback=angular.callbacks._0";   
    var pa = [];
    var paPromise = $q.defer();
    $http({
        method: 'JSONP',
        url: url
        }).success(function(data){ 

        
        for (i = 0; i < data.feed.entry.length; i++) 
        {
            var entry = data.feed.entry[i];
            pa.push(entry.gsx$productivity.$t); 
    
        }     

        paPromise.resolve(pa); 
        console.log(pa);
    });
  

  

// $scope.myData = paPromise.promise;
    
 // Example array value that formed d3j <li>   
 // Need to pa array to passed here instead for myproductivity    array.
  
    
   var myProductvity=new Array(); 
   myProductvity[0]="10";       
   myProductvity[1]="90";
   myProductvity[2]="80";
   myProductvity[3]="100";
   myProductvity[3]="62";

 $scope.myData = myProductvity;


}