How to bind angular controller to the tab content in kendo tabstrip

Question

I use KendoTabStrip and KendoGrid to create my page. There're several tabs in my TabStrip, each tab's content is a grid. I put each grids in a separate html file and use contentUrl to load them, like this

http://demos.telerik.com/kendo-ui/tabstrip/ajax

But it looks like if I bind angular controller in each files doesn't work. The code for tab content looks like this:

<div class="k-content" ng-controller="testCtrl">
    <div class="data-grid" id="testGrid">
    </div>
</div>

The controller seems doesn't been binded. Anyone can help?

Answer 1

Try this

<div ng-controller="MyCtrl">
            <div kendo-tab-strip k-content-urls="[ null, null]">
              <!-- tab list -->
              <ul>
                <li class="k-state-active">First tab</li>
                <li>Second tab</li>
              </ul>

              <div style="padding: 1em">
                This is the first tab
              </div>

              <div style="padding: 1em">
                This is the second tab
              </div>
            </div>
        </div>