Re-binding a tree (Wijmo tree) with AngularJS

Question

I am fairly new to AngularJS, and really struggling to re-bind a Wijmo tree (or even a tree implemented using UL and LI elements wth ng-repeat) with new data on changing of value of a Wijmo combobox (or, even a regular dropdown of HTML select elem). Below is the code I have written, which is working fine in initial page load. But on changing the dropwdown, the tree is not being reloaded with new data fetched by loadDomainTree method; it is still showing old data. Can somebody help me figure out what's wrong with this code?

HTML:

<div ng-controller="DomainCtrl">
    <select id="domain" ng-model="currentDomain" ng-options="item.Name for item in domainList"></select>
    <div>
        <ul id="wijtree">
            <li ng-repeat="item in domainEntityList" id={{item.Id}}>
                <a>{{item.Name}}</a>
            </li> 
        </ul>
    </div>                                                      
</div> 

JS:

$(document).ready(function ()
{
    $("#domain").wijcombobox({
        isEditable: false
    });

    $("#wijtree").wijtree();
});

function DomainDropdownModel(data) {
    this.Id = data.Id.toString();
    this.Name = data.Name;
};

function DomainTreeModel(data) {
    this.Id = data.Id;
    this.Name = data.Name;
};

function DomainCtrl($scope, $locale) {
    $scope.domainList = [];

    $.ajax({
        url: dropDownUrl,
        async: false,
        success: function (data) {
            $(data).each(function (i, val) {
                var domain = data[i];
                var domainId = domain.Id.toString();
                var domainName = domain.Name;
                $scope.domainList.push(new DomainDropdownModel({ Id: domainId, Name:  domainName }));
            });
        }
    });

    $scope.currentDomain = $scope.domainList[0];

    $scope.loadDomainTree = function (domainId) {
    domainEntitiesUrl = DOMAIN_API_URL + DOMAIN_ID_PARAM + domainId;
    //alert(domainEntitiesUrl);
    $scope.domainEntityList = [];
    $.ajax({
        url: domainEntitiesUrl,
        async: false,
        success: function (data) {
            $(data).each(function (i, entity) {
                var domainEntity = data[i];
                var domainEntityId = domainEntity.Id.toString();
                var domainEntityName = domainEntity.Name;
                $scope.domainEntityList.push(new DomainTreeModel({ Id: domainEntityId, Name: domainEntityName }));
                });
            }

        });
    };

    //Will be called on setting combobox dfault selection and on changing the combobox
    $scope.$watch('currentDomain', function () {
        $scope.loadDomainTree($scope.currentDomain.Id);
    });
}

Answer 1

You may $watch for the selectedItem of WijCombobox and then, re-load the wijtree accordingly. Here is the code:

$scope.$watch('selectedItem', function (args) {
        if (args === 'Tree 1') {
                $("#wijtree").wijtree("option", "nodes", $scope.nodes1);
            }
            else {
                $("#wijtree").wijtree("option", "nodes", $scope.nodes2);
            }
   });

HTML Code

<wij-combobox data-source="treeList" selected-value="selectedItem">
            <data>
                <label bind="name"></label>
                <value bind="code"></value>
            </data>
 </wij-combobox>