Google диаграммы в Angular JS контроллер не загружается

Question

Я пытаюсь загрузить диаграммы Google в Angular JS, но веб-страница возвращает сообщение "Невозможно нарисовать диаграмму: данные не указаны"

Мой HTML-код просто:

    <div ng-init="myChartObject.type='ColumnChart'">
    <div google-chart chart="myChartObject" style="height:200px;width:50%;"></div>
    </div>

У меня есть "myChartObject", определенный в контроллере, который загружает зависимости для 2 объектов ресурсов - Sensor и AllSensors:

 angular.
 module('allCharts').
component('allCharts', {
templateUrl: 'all-charts/all-charts.template.html',
controller:['Sensor', 'AllSensors',
    function AllChartsController( Sensor, AllSensors) {
    var self = this;
    ....
        self.myChartObject = {};

        self.myChartObject.type = "ColumnChart";

        self.onions = [
            {v: "Onions"},
            {v: 3},
        ];

        self.myChartObject.data = {"cols": [
            {id: "t", label: "Topping", type: "string"},
            {id: "s", label: "Slices", type: "number"}
        ], "rows": [
            {c: [
                {v: "Mushrooms"},
                {v: 3},
            ]},
            {c: self.onions},
            {c: [
                {v: "Olives"},
                {v: 31}
            ]},
            {c: [
                {v: "Zucchini"},
                {v: 1},
            ]},
            {c: [
                {v: "Pepperoni"},
                {v: 2},
            ]}
        ]};

        self.myChartObject.options = {
            'title': 'How Much Pizza I Ate Last Night'
        };
  }
]

});

Я знаю, что данные есть, потому что в HTML я могу написать:

     <p>{{$ctrl.myChartObject.data}}</p>

И данные на веб-странице возвращаются:

{ "смещ_по_столбцы":[{"ID":"T", "метка": "Первое место", "типа": "строка"}, { "идентификатор":"S", "метка": "Кусочки"," Тип ":" номер "}]," строки ": [{" с ":[{"v":" Грибы "},{"v":3}]},{" с ": [{" v": "Лук"}, { "v": 3}]}, { "с":[{"v": "Оливки"},{"v":31}]},{"С":[{"v":" цуккини "},{"v":1}]},{" с ":[{"v":" пепперони "},{"v":2}]}]}

Так чего мне здесь не хватает? Почему график не загружает эти данные? Я подозреваю, что что-то связано с моим определением области, я использую var self= this, и затем я могу извлечь атрибуты из self, используя переменную $ctrl (а не обычную $scope). Должно ли это все еще работать таким образом?