JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-3.2/select2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<script src="http://ivaynberg.github.com/select2/select2-3.2/select2.js"></script>
<div ng-app="angularApp">
    <div ng-controller="testCtrl">selectedOptions: {{selectedOptions}}
        <br />
        <input type="hidden" multiple ui-select2="categoryOptions" ng-model="selectedOptions" style="width: 300px">
    </div>
</div>

JavaScript

angular.module('angularApp', ['ui']);

function testCtrl($scope) {
    var data = {
        results: [{
            text: 'cat1',
            children: [{
                text: 'one',
                id: 1
            }, {
                text: 'two',
                id: 2
            }]
        }, {
            text: 'cat2',
            children: [{
                text: 'three',
                id: 3
            }, {
                text: 'four',
                id: 4
            }]
        }]
    };
    $scope.selectedOptions = [{
                id: 3
            }];
    $scope.categoryOptions = {
        query: function (query) {
            query.callback(data);
        }
    }
}