dc.js x axis ordinal chart issue

I am trying to draw a simple bar chart using crossfilter, dc.js and angular-dc. The piechart works fine. The barchart does not render the bars. In Chrome, if I inspect, I see the values are there. and if I force focus, I do see the charts. I have tried all the suggestions but it seems that there are 3 issues:

Bars are starting at 0
The width is 1 px
Bars are not rendering on the screen

Any pointers?

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js - Pie Chart Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="public/lib/dcjs/web/css/dc.css"/>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script type="text/javascript" src="public/lib/d3/d3.js"></script>
    <script type="text/javascript" src="public/lib/crossfilter/crossfilter.js"></script>
    <script type="text/javascript" src="public/lib/dcjs/dc.js"></script>
    <script type="text/javascript" src="public/lib/angular/angular.js"></script>
    <script type="text/javascript" src="public/lib/angular-dc/dist/angular-dc.js"></script>
</head>
<body ng-app="app">
<!-- we nicely separate the view and the data. Here, all information concerning the way to display the data
is in the template -->
<div ng-controller="myController">
    <div dc-chart="pieChart"
         dc-chart-group="1"
         dc-width="780"
         dc-height="480"
         dc-inner-radius="100"
         dc-dimension="fruit"
         dc-group="fruitSales"
         dc-legend="dc.legend()">
    </div>
    <div dc-chart="barChart"
         dc-width="780"
         dc-height="480"
         dc-dimension="fruit"
         dc-group="fruitSales"
         dc-x="d3.scale.ordinal().domain(['','Apple','Banana'])"
         dc-xUnits ="dc-units-ordinal"
         dc-elastic-y="true"
         dc-center-bar="true"
         dc-gap="1"
         dc-bar-padding="0.5"
         dc-xAxisPadding="50"
         dc-legend="dc.legend()">
    </div>
    </div>
</div>
<script type="text/javascript">
    angular.module("app", ["angularDc"]);
    myController = function($scope) {
            var fruitCf =  crossfilter([
                {Name: 'Apple', Sales: 40},
                {Name: 'Apple', Sales: 40},
                {Name: 'Banana', Sales: 20}]);
            $scope.fruit  = fruitCf.dimension(function(d) {return d.Name;});
            $scope.fruitSales = $scope.fruit.group().reduceSum(function(d) {return d.Sales;});
            //$scope.$apply()
        };
</script>
</body>
</html>

I could not find a solution to this problem But another way of integrating the dc and angular which we did was to feed data to the crossfilter via the angular scope and code the charts as we do normally in dc and set them up in the html by calling divs. We did not notice any performance downgrade using this method.