AngularJS attributes (ng-) and controllers are not working for dynamically loaded panelbar

[Remigijus]

Hello,

I'm trying to setup a panelbar that uses anglularjs library in their dynamically loaded panels. Unfortunately I was not able to make my angularjs controllers and ng attributes working in the loaded panels. The code below:

Index.cshtml
..

@(Html.Kendo().PanelBar()
    .Name("panelbar")
    .ExpandMode(PanelBarExpandMode.Single)
    .Items(panelbar =>
    {
        panelbar.Add().Text("About")
            .LoadContentFrom("About", "Home"); // About - Action, Home - controller

        panelbar.Add().Text("Contact")
            .LoadContentFrom("Contact", "Home");
    })
)

About.cshtml

<script src="~/Scripts/Controllers/AboutController.js"></script>
<div ng-controller="AboutController">
    {{ "this one is not working..." }}
</div>

AboutController.js

(function () {
    var app = angular.module("testPanel");
    var AboutController = function() {
        console.log('not working as it supposed to work ');
    }
    app.controller("AboutController", AboutController);
}());

The Anglular controllers and attributes are working fine outside the PanelBar. 
Thanks!

[Alex Gyoshev]

Hello Remigijus,

The server-side wrappers cannot be mixed with AngularJS. If you are writing an AngularJS client-side app, you need to use the Kendo UI widgets as directives, as documented in the Using Kendo UI and AngularJS help topic.

Regards,
Alex Gyoshev
Telerik