PHPackages                             components/ui-select - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. components/ui-select

ActiveComponent

components/ui-select
====================

AngularJS UI Select

0910JavaScript

Since Jul 13Pushed 11y ago1 watchersCompare

[ Source](https://github.com/wajatimur/ui-select)[ Packagist](https://packagist.org/packages/components/ui-select)[ RSS](/packages/components-ui-select/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

AngularJS ui-select [![Build Status](https://camo.githubusercontent.com/c81c838919e95758ca53746ef7b2bfcdec0ef39232a78091ea729f47f75002ae/68747470733a2f2f7472617669732d63692e6f72672f616e67756c61722d75692f75692d73656c6563742e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/angular-ui/ui-select)
===============================================================================================================================================================================================================================================================================================================

[](#angularjs-ui-select-)

AngularJS-native version of [Select2](http://ivaynberg.github.io/select2/) and [Selectize](http://brianreavis.github.io/selectize.js/).

- [Demo](http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview)
- [Bootstrap theme](http://plnkr.co/edit/QCwSM75ilH2Vh6D9aMA4?p=preview)

Features
--------

[](#features)

- Search and select
- Available themes: Bootstrap, Select2 and Selectize
- Keyboard support
- jQuery not required (except for old browsers)
- Small code base: 400 lines of JavaScript vs 20 KB for select2.min.js

For the roadmap, check [issue #3](https://github.com/angular-ui/ui-select/issues/3) and the [Wiki page](https://github.com/angular-ui/ui-select/wiki/Roadmap).

Browser compatibility
---------------------

[](#browser-compatibility)

Starting from Internet Explorer 8 and Firefox 3.6 included.

Installation using [Bower](http://bower.io/)
--------------------------------------------

[](#installation-using-bower)

Check the [examples](https://github.com/angular-ui/ui-select/blob/master/examples).

- `bower install angular-ui-select`
- Inside your HTML add
    - select.js: ``
    - select.css: ``

Installation using [Composer](http://getcomposer.org/)
------------------------------------------------------

[](#installation-using-composer)

Make sure composer is install globally before we proceed. After that we need to add below piece of code in `composer.json` file located inside your project root folder.

```
{
    "require": {
        "components/ui-select": "dev-master"
    }
}

```

- Run `composer update` and composer will install the component.
- Inside your HTML add below script and link tags.
    - select.js: ``
    - select.css: ``

### Bootstrap theme

[](#bootstrap-theme)

If you already use Bootstrap, this theme will save you a lot of CSS code compared to the Select2 and Selectize themes.

Bower:

- `bower install bootstrap`
- ``
- Or the [LESS](http://lesscss.org/) version: `@import "bower_components/bootstrap/less/bootstrap.less";`

[Bootstrap CDN](http://www.bootstrapcdn.com/):

- ``

Configuration:

```
app.config(function(uiSelectConfig) {
  uiSelectConfig.theme = 'bootstrap';
});
```

### Select2 theme

[](#select2-theme)

Bower:

- `bower install select2#~3.4.5`
- ``

[cdnjs](http://cdnjs.com/):

- ``

Configuration:

```
app.config(function(uiSelectConfig) {
  uiSelectConfig.theme = 'select2';
});
```

### Selectize theme

[](#selectize-theme)

Bower:

- `bower install selectize#~0.8.5`
- ``
- Or the [LESS](http://lesscss.org/) version: `@import "bower_components/selectize/dist/less/selectize.default.less";`

[cdnjs](http://cdnjs.com/):

- ``

Configuration:

```
app.config(function(uiSelectConfig) {
  uiSelectConfig.theme = 'selectize';
});
```

FAQ
---

[](#faq)

### ng-model not working with a simple variable on $scope

[](#ng-model-not-working-with-a-simple-variable-on-scope)

You cannot write:

```

  [...]

```

You need to write:

```

  [...]

```

Or:

```

  [...]

```

For more explanations, check [ui-select #18](https://github.com/angular-ui/ui-select/issues/18) and [angular.js #6199](https://github.com/angular/angular.js/issues/6199).

### ng-bind-html gives me "Error: \[$sce:unsafe\] Attempting to use an unsafe value in a safe context"

[](#ng-bind-html-gives-me-error-sceunsafe-attempting-to-use-an-unsafe-value-in-a-safe-context)

You need to use module [ngSanitize](http://docs.angularjs.org/api/ngSanitize) (recommended) or [$sce](http://docs.angularjs.org/api/ng/service/$sce):

```
$scope.trustAsHtml = function(value) {
  return $sce.trustAsHtml(value);
};
```

```

```

### I get "TypeError: Object \[...\] has no method 'indexOf' at htmlParser"

[](#i-get-typeerror-object--has-no-method-indexof-at-htmlparser)

You are using ng-bind-html with a number:

```

```

You should write instead:

```

```

Or:

```

```

Development
-----------

[](#development)

### Prepare your environment

[](#prepare-your-environment)

- Install [Node.js](http://nodejs.org/) and NPM (should come with)
- Install global dev dependencies: `npm install -g bower gulp`
- Install local dev dependencies: `npm install && bower install` in repository directory

### Development Commands

[](#development-commands)

- `gulp` to jshint, build and test
- `gulp build` to jshint and build
- `gulp test` for one-time test with karma (also build and jshint)
- `gulp watch` to watch src files to jshin, build and test when changed

Contributing
------------

[](#contributing)

- Run the tests
- Try the [examples](https://github.com/angular-ui/ui-select/blob/master/examples)

When issuing a pull request, please exclude changes from the "dist" folder to avoid merge conflicts.

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 58.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/5d3d312724790ecadc5ab67d52363d2a0347d0caeb8c99cfdc10988c92fae1ac?d=identicon)[azrijamil](/maintainers/azrijamil)

---

Top Contributors

[![tkrotoff](https://avatars.githubusercontent.com/u/643434?v=4)](https://github.com/tkrotoff "tkrotoff (99 commits)")[![dimirc](https://avatars.githubusercontent.com/u/5034942?v=4)](https://github.com/dimirc "dimirc (43 commits)")[![ProLoser](https://avatars.githubusercontent.com/u/67395?v=4)](https://github.com/ProLoser "ProLoser (12 commits)")[![azrijamil](https://avatars.githubusercontent.com/u/38235944?v=4)](https://github.com/azrijamil "azrijamil (3 commits)")[![just-boris](https://avatars.githubusercontent.com/u/812240?v=4)](https://github.com/just-boris "just-boris (2 commits)")[![duncanbeevers](https://avatars.githubusercontent.com/u/7367?v=4)](https://github.com/duncanbeevers "duncanbeevers (2 commits)")[![sheerun](https://avatars.githubusercontent.com/u/292365?v=4)](https://github.com/sheerun "sheerun (2 commits)")[![nateabele](https://avatars.githubusercontent.com/u/18288?v=4)](https://github.com/nateabele "nateabele (1 commits)")[![perry](https://avatars.githubusercontent.com/u/952316?v=4)](https://github.com/perry "perry (1 commits)")[![chelsea](https://avatars.githubusercontent.com/u/353241?v=4)](https://github.com/chelsea "chelsea (1 commits)")[![brettbatie](https://avatars.githubusercontent.com/u/3673593?v=4)](https://github.com/brettbatie "brettbatie (1 commits)")[![0x-r4bbit](https://avatars.githubusercontent.com/u/445106?v=4)](https://github.com/0x-r4bbit "0x-r4bbit (1 commits)")

### Embed Badge

![Health badge](/badges/components-ui-select/health.svg)

```
[![Health](https://phpackages.com/badges/components-ui-select/health.svg)](https://phpackages.com/packages/components-ui-select)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)