If you are looking for a step by step guide for adding UI Bootstrap to an existing AngularJS project that has bower configured as a package manager, here it is. UI Bootstrap is a set of components for AngularJS projects. They are nicely looking and production proven elements that makes building the UI part of an application easier. Obviously, there are more than one possible configuration. Nevertheless, I present one of them. Other possibilities can be achieved by choosing different options described in UI Bootstrap installation documentation.

What UI Bootstrap is

UI Bootstrap is a set of UI components like accordion, button, dropdown, popover, progress bar, tooltip, typeahead. They were implemented in a way that allows easy usage in AngularJS projects. Actually, UI Bootstrap is only a set of mechanisms of those elements like folding/unfolding the accordion, radio behaviour of buttons so it requires Bootstrap CSS for styling.

The below description covers installation both of them to have a complete solution.

Bootstrap installation

As I mentioned in the above paragraph, UI Bootstrap uses styles defined in the Bootstrap project. Adding it to my project is a good first step. As my project uses bower as a package manager (configured in Setting up the AngularJS project article), installation can be done by the install command:

D:\Git\AngularTest>bower install bootstrap --save

A reference to the CSS file has to be added to my index.html file:

<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />

UI Bootstrap installation

UI Bootstrap can be added in a similar way but it is important to choose angular-bootstrap not angular-ui or ui-bootstrap which is a common mistake.

D:\Git\AngularTest>bower install angular-bootstrap --save

When the installation is successful, an appropriate script has to be referenced in the index.html file by including the script line:

<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>

As it is an AngularJS module, it has to be loaded by indicating it as a dependency for the application. In my case it is adding 'ui.bootstrap' to the controllers.js file:

angular.module('angularTest.controllers', ['timer', 'ui.bootstrap'])
    .controller('angularTestController', ['$scope', function($scope) {

At this point, refreshing the main page of the application in the browser should change nothing.

Using UI Bootstrap

Validation of the whole configuration can be done by adding a sample code to the index.html file between the body tags:

<div class="btn-group">
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>

Three buttons should be visible on the page and they should behave like radio buttons - when one is clicked/selected, the other one should get unselected.

More examples can be found on the home page of UI Bootstrap. Enjoy using it!