Bootstrap directives for AngularJS.

Fork me on GitHub
Heads up! These docs are for AngularStrap v1, which is no longer officially supported. Check out the latest version of AngularStrap!

Overview and examples

Create tabs interfaces by appending a bs-tabs attribute to a div container.

Edit in plunker
$scope.tabs: {{tabs | json}}


<div data-fade="1" ngModel="activeTab" bs-tabs>
  <div ng-repeat="tab in tabs" data-title="{{tab.title}}"><p>{{tab.content}}</p></div>
Heads up! You can programmaticaly switch tab with an optional ngModel attribute.
You must use dot-notation (ie. myObj.myProp) to make the two-way databinding work.

Overview and examples

Parses the content passed to the directive & displays a tooltip with it.

Use any button/link to trigger a tooltip menu by appending a bs-tooltip attribute.

Both $ and $scope.hide() are available inside the tooltip to toggle its visibility.

Edit in plunker
tooltip: {{tooltip | json}}

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

<!-- Basic tooltip on hover -->
<a href="#" bs-tooltip="tooltip.title">...</a>
<!-- Button to trigger tooltip on click -->
<button type="submit" class="btn" data-trigger="click" bs-tooltip="tooltip.title">...</button>
<!-- Force close others with data-unique attribute -->
<input type="text" data-trigger="focus" data-unique="1" bs-tooltip="tooltip.title"/>
<!-- Two-way databinding -->
<input type="checkbox" ng-model="tooltip.checked" bs-tooltip="tooltip.title"/>
Heads up! To prevent databinding issues, "the rule of thumb is, if you use ng-model there has to be a dot somewhere." Miško Hevery

Overview and examples

Fetches an external html partial (or an inline ng-template) and populates the popover with its content.

Use any button/link to trigger a popover menu by appending a bs-popover attribute.

Both $ and $scope.hide() and $scope.$popover() are available inside the popover to toggle its visibility.

Edit in plunker
popover: {{popover | json}}
<!-- Button to trigger popover with an external partial -->
<button type="button" class="btn" bs-popover="'partials/popover.html'">...</button>

<!-- You can also use a simple object {title:'', content:'', etc.} instead of a partial/template -->
<button type="button" class="btn" bs-popover="popover">...</button>

<!-- Force close others with data-unique attribute -->
<button type="button" class="btn" data-unique="1" bs-popover="'partials/popover.html'">...</button>

<!-- Popover (external ./partials/popover.html or inline ng-template)  -->
<form name="popoverForm">
  <p ng-bind-html-unsafe="popover.content"></p>
  <br />
  <pre>2 + 3 = {{ 2 + 3 }}</pre>
  <div class="form-actions">
    <button type="button" class="btn" ng-click="submitForm($popover)">Close</button>
    <button class="btn btn-primary" ng-click="popover.saved=true;hide()">Save changes</button>
Heads up! You can use ng-controller="MyPopoverCtrl" alongside bs-popover="..." to spawn a controller with a custom scope for your popover.

Overview and examples

Build a custom alert with the bs-alert attribute.

alerts: {{alerts | json}}

<!-- Basic static alert (default bootstrap behavior) -->
<div class="alert fade" bs-alert><strong>Hey!</strong> This is a static alert.</div>

<!-- Alert bound to an object (alert.closed is set to true on close) -->
<div class="alert fade" bs-alert="alert"></div>

<!-- Use an array stack (alert is removed from the stack on close) -->
<div class="alerts">
  <div class="alert fade" ng-repeat="alert in alerts" bs-alert="alert"></div>
Heads up! You can use a button with data-dismiss="alert" to dismiss your alerts.

Overview and examples

Enables databinding between a button and a scope object.

Use any button/link with ng-model and bs-button attributes.

button: {{button | json}}
<button type="button" class="btn" ng-model="" bs-button>...</button>

Button Select

buttonSelect: {{buttonSelect | json}}
<div class="input-append">
  <input type="text" ng-model="buttonSelect.price">
  <button type="button"class="btn" ng-model="buttonSelect.currency" bs-button-select="['$', '€', '¥']"></button>


Add bs-buttons-checkbox for checkbox-style toggling on btn-group.

checkbox: {{checkbox | json}}
<div class="btn-group" bs-buttons-checkbox>
  <button type="button" class="btn" ng-model="checkbox.left">...</button>
  <button type="button" class="btn" ng-model="checkbox.middle">...</button>
  <button type="button" class="btn" ng-model="checkbox.right">...</button>


Add bs-buttons-radio for radio-style toggling on btn-group.

radio: {{radio | json}}
<div class="btn-group" bs-buttons-radio>
  <button type="button" class="btn" ng-model="radio.left">...</button>
  <button type="button" class="btn" ng-model="radio.middle">...</button>
  <button type="button" class="btn" ng-model="radio.right">...</button>

Radios with a single model

Add bs-buttons-radio with an ng-model attribute to bind your buttons to a single model.

radioValue: {{radioValue | json}}
<div class="btn-group" ng-model="radioValue" bs-buttons-radio>
  <button type="button" class="btn" value="left">...</button>
  <button type="button" class="btn" value="middle">...</button>
  <button type="button" class="btn" value="right">...</button>

Overview and examples

Use any input with typeahead functionality by appending a bs-typeahead attribute.

value: {{typeaheadValue}}

typeahead: {{typeahead}}

<input type="text" ng-model="typeaheadValue" bs-typeahead="typeahead">

<!-- You can also use a function -->
<input type="text" ng-model="typeaheadValue" bs-typeahead="typeaheadFn">

<!-- Function defined in your controller -->
$scope.typeaheadFn = function(query) {
  return $.map($scope.typeahead, function(country) {
    return country + '_1';

<!-- Async function defined in your controller  -->
$scope.typeaheadFn = function(query, callback) {
  $http.get('/stations/autocomplete?term='+query).success(function(stations) {
    callback(stations); // This will automatically open the popup with retrieved results
Heads up! You can use a the data-min-length attribute to either show the popup right away (minLength=0) or only after a specific number of chars have been typed in.

Overview and examples

Directive for bootstrap-select (made by Silvio Moreto).

Append a bs-select attribute to enable bootstrap-select on a regular Angular select.

 Requires bootstrap-select.js & bootstrap-select.css.

Simple selects

Edit in plunker
$scope.selects: {{selects | json}}
$scope.selectedItem: {{selectedItem | json}}

<select class="span2" ng-model="selectedItem" ng-options=" as for (key, value) in selects" data-style="btn-primary" bs-select></select>

Multiple selects

Edit in plunker
$scope.selects: {{selects | json}}
$scope.selectedItems: {{selectedItems | json}}

<select class="span4" ng-model="selectedItem" multiple title="Choose one of the following..." ng-options=" as for (key, value) in selects" data-style="btn-primary" bs-select></select>

Overview and examples

Directive for bootstrap-datepicker (made by Stefan Petre).

 Requires bootstrap-datepicker.js & bootstrap-datepicker.css.

Add a datepicker to an input by appending a bs-datepicker attribute.

 Supports AngularJS validation out of the box.

Edit in plunker
datepicker: {{datepicker | json}}
<div class="control-group input-append">
  <input type="text" ng-model="" data-date-format="dd/mm/yyyy" bs-datepicker>
  <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>

<!-- You can use the global $strapConfig to set defaults -->
app.value('$strapConfig', {
  datepicker: {
    language: 'fr',
    format: 'M d, yyyy'
Heads up! You can use a custom button or add-on as a toggle with data-toggle="datepicker" on a sibling element.

Overview and examples

Directive for bootstrap-timepicker (made by jdewit).

 Requires bootstrap-timepicker.js & bootstrap-timepicker.css.

Add a timepicker to an input by appending a bs-timepicker attribute.

 Supports AngularJS validation out of the box.

timepicker: {{timepicker | json}}
<div class="control-group input-append">
  <input type="text" ng-model="timepicker.time" bs-timepicker>
  <button type="button" class="btn" data-toggle="timepicker"><i class="icon-time"></i></button>
Heads up! You can use a custom button or add-on as a toggle with data-toggle="timepicker" on a sibling element.