chart with Angular.js and D3

Question

I'm try to make chart with angular.js but the chart don't apears in page the code works when run html page with out rout.js but when user rout.js It display blank page This is my code.

 var myapp = angular.module('myapp', ['angularCharts']);
   function D3Controller($scope) {

console.log("Entering Scope");

$scope.config = {
    title: 'Products',
    tooltips: true,
    labels: false,
    mouseover: function () {
    },
    mouseout: function () {
    },
    click: function () {
    },
    legend: {
        display: true,
        //could be 'left, right'
        position: 'right'
    }
}
 console.log("And here we are in $scope." + $scope.config.title );
;

$scope.data = {
    series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
    data: [{
            x: "Laptops",
            y: [100, 500, 0],
            tooltip: "this is tooltip"
        }, {
            x: "Desktops",
            y: [300, 100, 100]
        }, {
            x: "Mobiles",
            y: [351]
        }, {
            x: "Tablets",
            y: [54, 0, 879]
        }]


}
 console.log("And here we are in $scope.data.sereis" + $scope.data.series );
;

}

rout.js

  'use strict';

  myappApp.config(function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) {
        $routeProvider
            .when('/d3', {
                templateUrl: 'views/d3/d3.html',
                controller: 'D3Controller',

                access: {
                    authorizedRoles: [USER_ROLES.all]
                }
            })
    });

html page

  <div ng-controller="D3Controller"  >
    <div id="d3-chart" style="width: 100%; height: 500px; padding: 0px; position: relative;">
                <div 
                    data-ac-chart="'bar'" 
                    data-ac-data="data" 
                    data-ac-config="config" 
                    class="chart">
                </div>
                <input ng-model="config.title" style="width: 100%;"/>
                <br>
                <input ng-model="data.series" style="width: 100%;"/>
                <br>
                <input ng-model="data.data" style="width: 100%;"/>
            </div>
      </div>

Can any one help me please?

Answer 1

You haven't registered your D3Controller anywhere in your code but are referring to it as a string while declaring the route.

To fix the problem, if D3Controller is in the same scope as the myApp.config use the bare name of the function D3Controller instead of the string "D3Controller" .

Otherwise, register the controller with your app:

myApp.controller('D3Controller', D3Controller);