Angular UI Bootstrap

Angular UI Bootstrap re-implements Bootstrap’s interactive widgets as pure AngularJS directives, covering accordions, modals, carousels, datepickers, typeaheads, and more without requiring jQuery or Bootstrap’s own JavaScript. Each component ships as an independent Angular module bound only to Bootstrap’s CSS, keeping the full bundle small (about 20kB gzipped) and letting teams pull in just the widgets they need.

The project reached feature-complete status as the AngularJS ecosystem matured, and its maintainers now point users building on modern Angular toward ng-bootstrap instead. It remains a stable, well-documented dependency for teams still running AngularJS 1.x applications that need Bootstrap-styled interactive components out of the box.

What You Get

• Native AngularJS directives - Bootstrap-styled widgets built from scratch as Angular components, not jQuery-plugin wrappers
• Modular component set - accordion, alert, carousel, datepicker, modal, pagination, popover, rating, tabs, timepicker, typeahead, and more, each independently includable
• Small footprint - roughly 20kB gzipped for the full bundle with zero third-party JS dependencies beyond Angular itself
• Precompiled templates - a tpls build ships directive templates precompiled into Angular’s template cache for single-file drop-in use

Common Use Cases

• Modal dialogs and confirmations - the $uibModal service opens configurable modal windows for forms, confirmations, and detail views
• Date and time pickers - datepicker and timepicker directives for calendar-based date selection and time input
• Autocomplete search inputs - the typeahead directive builds autocomplete/suggestion inputs bound to arrays or async promises
• Tabbed and collapsible layouts - tabs, accordion, and collapse directives organize content into progressive-disclosure UI patterns

Under The Hood

Architecture Each Bootstrap widget is implemented as an independent AngularJS module (e.g. ui.bootstrap.modal, ui.bootstrap.accordion) that composes small shared service modules — position.js for placement math, stackedMap.js/multiMap.js for tracking open modal instances, dateparser.js for date parsing — rather than depending on each other directly. All widget modules are aggregated into a single ui.bootstrap module via Grunt-driven concatenation (Gruntfile.js) into dist/ui-bootstrap-tpls.js. Each directive’s folder (src/<widget>/) bundles its controller/directive logic, an HTML template precompiled into $templateCache via html2js, a docs/ folder (demo + readme), and a test spec, so the module boundary is the directory itself. Data flow is push-based: consuming apps inject a widget’s service ($uibModal, $uibPosition) or bind directive attributes (is-open, ng-model), and the module reacts through Angular’s digest cycle rather than any central store. Because shared low-level modules like $position are wired directly into multiple consuming widgets (tooltip, popover, dropdown, datepickerPopup), changing that abstraction would require coordinated changes across every dependent widget.

Tech Stack A pure AngularJS 1.x library targeting Angular 1.4.x and above, with no runtime dependencies declared in package.json. DevDependencies pin angular/angular-mocks/angular-sanitize at 1.6.1 for testing, plus a bundled jQuery only inside the test harness (misc/test-lib). Build tooling is Grunt-based (grunt-contrib-concat/uglify/copy, grunt-html2js to inline templates, grunt-conventional-changelog for changelog generation). Tests run via Karma + Jasmine across Chrome and Firefox with coverage instrumentation, linting via ESLint and JSHint, and CI via Travis. Distribution artifacts (dist/ui-bootstrap-tpls.js, referenced from index.js) are prebuilt and published rather than compiled at install time.

Code Quality Every widget module has a co-located Jasmine spec (35 spec files across the repo), run through Karma with coverage instrumentation on every Travis build. ESLint and JSHint enforce style as part of the Grunt test task. Code is plain ES5 JavaScript with no static typing; naming is consistent throughout, with providers prefixed $uib and directives prefixed uib- per the README’s documented prefix migration. Error handling leans on explicit guard clauses (type checks before invoking callbacks) rather than typed result patterns, with AngularJS’s own digest-cycle exception handling as the backstop.

API Design The public API is consumed the way any AngularJS module is: declare ui.bootstrap (or a specific widget submodule) as an app dependency, then use declarative directives (is-open, ng-model) or injectable services ($uibModal.open({...})) — a pattern requiring zero new mental model for existing Angular developers. Naming is consistent across the whole surface, and getting started needs minimal boilerplate: install via npm, add the module dependency, include Bootstrap’s CSS, and use the prebuilt template-inlined bundle with no additional build step. Documentation is strong for its era — every widget ships a docs/readme.md with an attribute/type/default table plus a runnable demo, and the top-level README links to a hosted demo site.