Updating View on Change Event

[Christy]

I have a multiselect control on my AngularJS page that can contain too many items to fit nicely in the required area. As a result, I have tagMode as "single" to show how many items are selected. I have included a kendo-tooltip in a div tag around the MultiSelect with a title that is a list of all the selected items. 

<div id="showTooltip" kendo-tooltip title="{{vm.titleText}}">
     <select kendo-multi-select="showMulti"
             id="calendarShow"
             k-options="vm.showOptions"
             k-ng-model="vm.selectedTypes"></select>
</div>

I am currently updating this list in the change event in vm.showOptions. This works whenever items are selected or deselected, provided that there is AT LEAST one item selected. When I deselect the final item, the change event runs and updates the value of vm.titleText to a value of "None". However, the tooltip that is shown is empty. When I look in the developer tools, the title is not set at all. I assume there is something that fires in the MultiSelect when items are selected, but does not fire when there is no selection. Is there some way to force this to run?

This is my change event code:

function checkInputs() {
   // Set up header text
    var title = $($scope.showMulti.element[0].previousSibling);
    var titleText = '';
    vm.selectedTypes = vm.selectedTypes.sort(function (a, b) {  return a - b;  });
    angular.forEach(vm.selectedTypes, function (item) {
        titleText = titleText + $filter('filter')(vm.showTypes, { 'value': item }, true)[0].text + ', ';
    });

    if (titleText) {
        titleText = titleText.slice(0, titleText.length - 2);
    } else {
        titleText = 'None';
        $scope.$digest();
    }
    vm.titleText = titleText;
}

Running $scope.$digest() or $scope.$apply() does not seem to have any effect on what is shown.

[Veselin Tsvetanov]

Hello Christy,

Here you will find a simple Dojo, based on the described scenario. You will notice that by using the $scope.$digest() call, the content of the Tooltip is updated according to the selected items in the MultiSelect. This call would be needed as at the time, when the change event of the MultiSelect gets fired, the Angular has already created the Tooltip, so another cycle is needed to apply changes.

I hope, that this helps.

Regards,
Veselin Tsvetanov
Progress Telerik