<!-- BEGIN PAGE BREADCRUMB -->
<ul class="page-breadcrumb breadcrumb">
	<li>
		<a href="#">Home</a><i class="fa fa-circle"></i>
	</li>
	<li class="active" data-ng-bind="$state.current.data.pageTitle">
	</li>
</ul>
<!-- END PAGE BREADCRUMB -->

<!-- BEGIN MAIN CONTENT -->
<div class="note note-success note-bordered">
	<h3>UI Select</h3>
	<p>
		AngularJS-native version of Select2
	</p>
	<p>
		For more info please check the <a href="https://github.com/angular-ui/ui-select">official github page</a>
	</p>
</div>
<div class="row">
	<div class="col-md-12">
		<div class="portlet light" ng-controller="UISelectController">
			<div class="portlet-title">
				<div class="caption font-green-sharp">
					<i class="icon-settings font-green-sharp"></i>
					<span class="caption-subject bold uppercase">UI Select Demo</span>
					<span class="caption-helper hide"></span>
				</div>
				<div class="actions">
					<a class="btn btn-circle btn-icon-only btn-default" href="#">
					<i class="icon-cloud-upload"></i>
					</a>
					<a class="btn btn-circle btn-icon-only btn-default" href="#">
					<i class="icon-wrench"></i>
					</a>
				</div>
			</div>
			<div class="portlet-body">
				<form class="form-horizontal" role="form">
					<div class="form-body">


						<div class="form-group">
							<label class="col-md-3 control-label">Default:</label>
							<div class="col-md-6">
								<ui-select ng-model="person.selected" theme="bootstrap">
						            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
						            <ui-select-choices repeat="person in people | filter: $select.search">
						              <div ng-bind-html="person.name | highlight: $select.search"></div>
						              <small ng-bind-html="person.email | highlight: $select.search"></small>
						            </ui-select-choices>
						          </ui-select>
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-md-3 control-label">Grouped:</label>
							<div class="col-md-6">
								<ui-select ng-model="person.selected" theme="bootstrap">
            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
              <span ng-bind-html="item.name | highlight: $select.search"></span>
              <small ng-bind-html="item.email | highlight: $select.search"></small>
            </ui-select-choices>
          </ui-select>
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">With a clear button:</label>
							<div class="col-md-6">
								<div class="input-group">

            <ui-select ng-model="person.selected" theme="bootstrap">
              <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
              <ui-select-choices repeat="item in people | filter: $select.search">
                <span ng-bind-html="item.name | highlight: $select.search"></span>
                <small ng-bind-html="item.email | highlight: $select.search"></small>
              </ui-select-choices>
            </ui-select>

            <span class="input-group-btn">
              <button ng-click="person.selected = undefined" class="btn btn-default">
                <span class="glyphicon glyphicon-trash"></span>
              </button>
            </span>

          </div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-3 control-label">Disabled:</label>
							<div class="col-md-6">
								 <ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="true">
            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices repeat="item in people | filter: $select.search">
              <div ng-bind-html="item.name | highlight: $select.search"></div>
              <small ng-bind-html="item.email | highlight: $select.search"></small>
            </ui-select-choices>
          </ui-select>
							</div>
						</div>

						<div class="form-group">
							<label class="col-md-3 control-label">Multiselect:</label>
							<div class="col-md-6">
								 <ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled">
								    <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
								    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
								        {{person.name}} - {{person.email}}
								    </ui-select-choices>
								  </ui-select>
								  <p>Selected: {{multipleDemo.selectedPeople}}</p>

							</div>
						</div>


						<div class="form-actions">
							<div class="row">
								<div class="col-md-offset-3 col-md-9">
									<button type="submit" class="btn green">Submit</button>
									<button type="button" class="btn default">Cancel</button>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- END MAIN CONTENT -->
<!-- BEGIN MAIN JS-->
<script></script>
<!-- BEGIN MAIN JS -->
