How to add child nodes to a Kendo Treeview without multiple parent selection in angularjs? - angularjs

Question

I am using the following to add a child node to a kendo treeview , it works if i dont try to select the first node. Once i select the first node , it doesnt add a child node and it stays selected even if i select other nodes.
But if i dont select the first node all seems to work as expected.
Any ideas as to whey this may be happening ?
Html:
<div ng-show="selectedItem">
<h4>Selected: {{selectedItem.Service}}</h4>
<button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
<button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
<button class="k-button" ng-click="remove(selectedItem)">Delete</button>
</div>
<div id="xmlFileDestinationModalTreeView"
kendo-tree-view="tree"
k-options="treeOptions"
k-on-change="selectedItem = dataItem"
style="border: 1px solid lightgrey; height: 300px; overflow: auto;">
<span k-template>
{{dataItem.Service}} <button class='k-button k-button-solid-base k-button-solid k-button-md k-rounded-md' ng-click='click(dataItem)'>+</button>
<i class="fa fa-plus" aria-hidden="true" ng-click="addBelow($event)"></i>
<i class="fa fa-trash" aria-hidden="true" ng-click="selectedItem=dataItem;remove(selectedItem, $event)"></i>
</span>
</div>
Javascript:
$scope.treeViewDataSource = new kendo.data.HierarchicalDataSource({
data: [],
schema: {
data: "json",
model: {
hasChildren: true,
children: "ChildServices"
}
}
});
$scope.treeOptions = {
loadOnDemand: true,
dataSource: $scope.treeViewDataSource,
dataTextField: "Service",
expandAll: false,
//checkboxes: {
// checkChildren: true
//}
};
$scope.click = function (dataItem) {
alert(dataItem.Service);
};
$scope.addAfter = function (item) {
var array = item.parent();
var index = array.indexOf(item);
var newItem = makeItem();
array.splice(index + 1, 0, newItem);
};
$scope.addBelow = function ($event) {
var newItem = $scope.testservice[0];
$scope.tree.append(newItem, $scope.tree.select());
};
$scope.remove = function (item) {
var array = item.parent();
var index = array.indexOf(item);
array.splice(index, 1);
$scope.selectedItem = undefined;
};
It seems as if the first Parent in the treeView stays as selected and focused once it is selected.Not sure how to clear that.
Here is what the newItem will look like :
This is the newItem object being added