Angularjs 通过角度剑道UI网格工具栏显示/隐藏列

我们的web应用程序使用Telerik剑道UI和许多角度剑道UI网格。每个网格都有几列。我们的一些用户不喜欢看到所有列，因此我们希望通过复选框为他们实现列显示/隐藏功能。根据，可以通过向剑道网格选项添加以下行来实现

$scope.gridOptions = {
    ...
    columnMenu: true,
    ...
}

上行将向每个列的标题添加列菜单，并在默认情况下启用排序、筛选、列显示/隐藏。问题是，列显示/隐藏现在出现在每个列的列菜单中，并且所有列都列在每个列中。这会导致冗余，而且用户每次都要做更多的工作来过滤网格（非常重要！！！）

下面是一个展示以下行为的dojo示例：

我想做的是在我的Angular Kendo UI网格的工具栏中实现一个下拉菜单或一个菜单，其中列出了带有复选框的所有列。用户应该能够选中/取消选中他们想要查看的列。然后我可以调用剑道UI网格的和方法来显示/隐藏剑道UI菜单上的列

我尝试构建一个自定义工具栏模板，其中包含剑道UI菜单，并绑定到静态文本数据

工具栏模板：

<script id="toolbarTemplate" type="text/x-kendo-template">
    <a class="k-button k-button-icontext k-grid-excel" href="\\#">
        <span class="k-icon k-i-excel"></span>Export to Excel</a>

    <a class="k-button" href="\\#">New Button</a>

    <ul kendo-menu 
        k-orientation="vertical"
        k-data-source="columnNames"
        k-on-select="onSelect(kendoEvent)">
    </ul>
  </script>

菜单没有显示（以下是带有自定义工具栏模板的dojo示例：

我是AngularJS的初学者。我是否采取了错误的方法？请帮助我实现网格工具栏上的下拉/菜单

谢谢

$scope.toolbarTemplate = $("#toolbarTemplate").html();

$scope.columnsData = new kendo.data.DataSource({
                data: [
              { text: "Column1" },
              { text: "Column2" },
              { text: "Column3" }
            ]
        });
$scope.columnsData.fetch();

$scope.columnNames = $scope.columnsData.data();