How to align multiple pie charts in Kendo UI with Angular-Kendo and Bootstrap?

Question

I have 2 Kendo pie charts. For the sake of simplicity lets assume the same charts. I just want to align them next to each other in a Bootstrap panel. I am using angular-kendo directives for the pie charts. Here is the code I wrote, but instead of aligning side by side, I am getting one chart reduced to a small size in the next row.

<div class="panel panel-default">
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-6">
                <div kendo-chart k-options="pie" k-data-source="countries" />
            </div>
            <div class="col-lg-6">
                <div kendo-chart k-options="pie" k-data-source="countries" />
            </div>
        </div>
    </div>
</div>

I have defined the data-source and pie options in the controller code:

 $scope.pie = {
        title: {
            position: "bottom",
            text: "WLAN"
        },
        legend: {
            visible: false
        },
        chartArea: {
            background: ""
        },
        seriesDefaults: {
            labels: {
                visible: true,
                background: "transparent",
                template: "#= category #: #= value#%",

            }
        },
        series: [{
            type: "pie",
            field: "value",
            categoryField: "category",
            padding: 100
        }],
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    };

    $scope.countries = {
        data: [
            {
                category: "blizzard",
                value: 53.8,
                color: "#9de219"
            }, {
                category: "alpha",
                value: 16.1,
                color: "#90cc38"
            }, {
                category: "hurricane",
                value: 11.3,
                color: "#068c35"
            },
        ]
    };