tree view from json in ui-select

Looking to display a nested json in a treeview structure in ui-select.
I can create a tree using an angular directive:

Code

data:        
$scope.treeFamily = {
            name : "Parent",
            children: [{
                name : "Child1",
                children: [{
                    name : "Grandchild1",
                    children: []
                },{
                    name : "Grandchild2",
                    children: []
                },{
                    name : "Grandchild3",
                    children: []
                }]
            }, {
                name: "Child2",
                children: []
            }]
        };


directive:
        module.directive("tree", function($compile) {
            return {
                restrict: "E",
                transclude: true,
                scope: {family: '='},
                template:       
                    '<ul>' + 
                        '<li ng-transclude></li>' +
                        '<p>{{ family.name }}</p>' + 
                        '<li ng-repeat="child in family.children">' +
                            '<tree family="child"></tree>' +
                        '</li>' +
                    '</ul>',
                compile: function(tElement, tAttr, transclude) {
                    var contents = tElement.contents().remove();
                    var compiledContents;
                    return function(scope, iElement, iAttr) {
                        if(!compiledContents) {
                            compiledContents = $compile(contents, transclude);
                        }
                        compiledContents(scope, function(clone, scope) {
                                 iElement.append(clone); 
                        });
                    };
                }
            };
        });

html:
        <tree family="treeFamily">

        </tree>

I would like to be able to search/select each node in ui-select. Looking for suggestions.