Angularjs: jquery child element selection issue

I used jquery to select the elements that it works great.

myModule.directive('uiSelectable', function ($parse) {
    return {
        link: function (scope, element, attrs, ctrl) {

        scope.$on('clearselection', function (event, document) {
          element.find('.ui-selected').removeClass('ui-selected')
        });

            element.selectable({
                stop: function (evt, ui) {
                    var collection = scope.$eval(attrs.docArray)
                    var selected = element.find('div.parent.ui-selected').map(function () {
                        var idx = $(this).index();
                        return { document: collection[idx] }
                    }).get();

                    scope.selectedItems = selected;
                    scope.$apply()
                }
            });
        }
    }
});

The problem is that when I click on the child in the selected one, it does not receive a click, and its parent element clicks (where I implemented the selection) it is fired

Can someone tell me how I can click on a child using angularjs

Plunker

http://plnkr.co/edit/3cSef9h7MeYSM0cgYUIX?p=preview

after a little research, I came to the conclusion that it is called JQuery UI-Selectable, anyone has an idea how to fix it using UI-Selectable or have any other alternative for selecting multiple items using ctlr + shift