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

# Modal directives/modal.js

## Overview and examples

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

Use any button/link to trigger a modal by appending a `bs-modal` attribute.

Both `$scope.show()`, `$scope.hide()` & `$scope.$modal()` are available inside the modal to toggle its visibility.

Edit in plunker

    $scope.modal: {{modal | json}}

    <!-- Button to trigger modal -->
    <button type="button" class="btn" bs-modal="'partials/modal.html'">...</button>

    <!-- Modal (external ./partials/modal.html or inline ng-template) -->
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Modal header</h3>
    </div>
    <div class="modal-body">
      <p>{{modal.content}}</p>
      <br />
      <pre>2 + 3 = {{ 2 + 3 }}</pre>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn" ng-click="hide()">Close</button>
      <button class="btn btn-primary" ng-click="modal.saved=true;hide()">Save changes</button>
    </div>

Heads up! You can use $modal functions `(show, hide, $modal)` out of its scope by passing them: `ng-click="someScopeFunction($modal)"`.

### $modal Service

AngularStrap ships with a `$modal` service that you can inject in your controllers to trigger modals in a more efficient way (ie. inside `ng-repeat`, etc.).

    // Create modal (returns a promise since it may have to perform an http request)
    var modalPromise = $modal({template: '/js/app/views/elements/modal-welcome.html', persist: true, show: false, backdrop: 'static', scope: $scope});

    // Toggle modal
    $scope.showModalViaService = function() {
      $q.when(modalPromise).then(function(modalEl) {
        modalEl.modal('show');
      });
    };

# Dropdown directives/dropdown.js

## Overview and examples

Toggleable, contextual menu for displaying lists of links.

Use any element to trigger a dropdown menu by appending a `bs-dropdown` attribute.

Edit in plunker

    $scope.dropdown: {{dropdown | json}}

    <!-- Button to trigger dropdown -->
    <button type="button" class="btn" bs-dropdown="dropdown">...</button>

    <!-- Separated button -->
    <div class="btn-group">
      <button type="button" class="btn btn-primary">...</button>
      <button type="button" class="btn btn-primary" bs-dropdown="dropdown">...</button>
        <span class="caret"></span>
      </button>
    </div>

# Navbar directives/navbar.js

## Overview and examples

Performs regular expression tests with the `data-match-route` attribute when `$location.path()` gets updated.

Toggles the `active` class for you. Trigger the behavior with a `bs-navbar` attribute.

Edit in plunker

    $location.path(): {{$location.path()}}

    <div class="navbar" bs-navbar>
      <div class="navbar-inner">
        <a class="brand" href="#">Title</a>
        <ul class="nav">
          <!-- You can use regular expressions -->
          <li data-match-route="/(:?navbar)"><a href="#/navbar">Home</a></li>
          <li data-match-route="/page-one"><a href="#/page-one">Page One</a></li>
          <li data-match-route="/page-two.*"><a href="#/page-two/sub-a">Page Two</a></li>
        </ul>
      </div>
    </div>

Heads up! The directives also supports `HTML5 mode`, you just have to drop the dashes.

# Tab directives/tab.js

## Overview and examples

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

Edit in plunker

    $scope.tabs: {{tabs | json}}

{{tab.content}}

`tabs.activeTab={{tabs.activeTab}}`

    <div data-fade="1" ngModel="activeTab" bs-tabs>
      <div ng-repeat="tab in tabs" data-title="{{tab.title}}"><p>{{tab.content}}</p></div>
    </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.

# Tooltip directives/tooltip.js

## 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 `$scope.show()` 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

# Popover directives/popover.js

## 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 `$scope.show()` 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>
      </div>
    </form>

Heads up! You can use `ng-controller="MyPopoverCtrl"` alongside `bs-popover="..."` to spawn a controller with a custom scope for your popover.

# Alert directives/alert.js

## Overview and examples

Build a custom alert with the `bs-alert` attribute.

    alerts: {{alerts | json}}

alerts[0].type

    <!-- 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>
    </div>

Heads up! You can use a button with `data-dismiss="alert"` to dismiss your alerts.

# Button directives/button.js

## 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="button.active" bs-button>...</button>

### Button Select

    buttonSelect: {{buttonSelect | json}}

Product price:

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

## Checkboxes

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>
    </div>

## Radios

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>
    </div>

### 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>
    </div>

# Typeahead directives/typeahead.js

## 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.

# Select directives/select.js

## 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="value.id as value.name 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="value.id as value.name for (key, value) in selects" data-style="btn-primary" bs-select></select>

# Datepicker directives/datepicker.js

## 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}}

date

    <div class="control-group input-append">
      <input type="text" ng-model="datepicker.date" data-date-format="dd/mm/yyyy" bs-datepicker>
      <button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
    </div>

    <!-- 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.

# Timepicker directives/timepicker.js

## 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}}

time

    <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>
    </div>

Heads up! You can use a custom button or add-on as a toggle with `data-toggle="timepicker"` on a sibling element.