# Getting started

### Dependencies

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

- AngularJS (requires AngularJS 1.4.x or higher, tested with 1.6.1). 0.14.3 is the last version of this library that supports AngularJS 1.3.x and 0.12.0 is the last version that supports AngularJS 1.2.x.
- Angular-animate (the version should match with your angular's, tested with 1.6.1) if you plan in using animations, you need to load angular-animate as well.
- Angular-touch (the version should match with your angular's, tested with 1.6.1) if you plan in using swipe actions, you need to load angular-touch as well.
- Bootstrap CSS (tested with version 4.0.0). This version of the library (3.0.6) works only with Bootstrap CSS in version 4.x. 2.5.0 is the last version of this library that supports Bootstrap CSS in version 3.x.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.

### Files to download

Build files for all directives are distributed in several flavours: minified for production usage, un-minified for development, with or without templates. All the options are described and can be downloaded from here. It should be noted that the `-tpls` files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ here and the README here.

Alternativelly, if you are only interested in a subset of directives, you can create your own build.

Whichever method you choose the good news that the overall size of a download is fairly small: 122K minified for all directives with templates and 98K without (~31kB with gzip compression, with templates, and 28K gzipped without)

### Installation

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the `ui.bootstrap` module:

    angular.module('myModule', ['ui.bootstrap']);

If you are using UI Bootstrap in the CSP mode, e.g. in an extension, make sure you link to the `ui-bootstrap-csp.css` in your HTML manually.

You can fork one of the plunkers from this page to see a working example of what is described here.

### Migration to prefixes

Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier, check our migration guide.

### CSS

Original Bootstrap's CSS depends on empty `href` attributes to style cursors for several components (pagination, tabs etc.). But in AngularJS adding empty `href` attributes to link tags will cause unwanted route changes. This is why we need to remove empty `href` attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application:

    .nav, .pagination, .carousel, .card-title a { cursor: pointer; }

### FAQ

Please check our FAQ section for common problems / solutions.

### Reading the documentation

Each of the components provided in `ui-bootstrap` have documentation and interactive Plunker examples.

For the directives, we list the different attributes with their default values. In addition to this, some settings have a badge on it:

- - This setting has an angular $watch listener applied to it.
- B - This setting is a boolean. It doesn't need a parameter.
- C - This setting can be configured globally in a constant service*.
- $ - This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.
- readonly - This setting is readonly.

For the services (you will recognize them with the `$` prefix), we list all the possible parameters you can pass to them and their default values if any.

* Some directives have a config service that follows the next pattern: `uibDirectiveConfig`. The service's settings use camel case. The services can be configured in a `.config` function for example.

# Accordion (ui.bootstrap.accordion)

Open only one at a time
This content is straight in the template.
{{group.content}}

The body of the uib-accordion group grows to fit the contents

{{item}}
Hello
Custom template with custom header template World

Please, to delete your account, click the button below

I can have markup, too! This is just some content to illustrate fancy headings.

The accordion directive builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.

The body of each accordion group is transcluded into the body of the collapsible element.

### uib-accordion settings

- `close-others` $ C (Default: `true`) - Control whether expanding an item will cause the other items to close.

- `template-url` (Default: `template/accordion/accordion.html`) - Add the ability to override the template used on the component.

### uib-accordion-group settings

- `heading` (Default: `none`) - The clickable text on the group's header. You need one to be able to click on the header for toggling.

- `is-disabled` $ (Default: `false`) - Whether the accordion group is disabled or not.

- `is-open` $ (Default: `false`) - Whether accordion group is open or closed.

- `template-url` (Default: `uib/template/accordion/accordion-group.html`) - Add the ability to override the template used on the component.

### Accordion heading

Instead of the `heading` attribute on the `uib-accordion-group`, you can use an `uib-accordion-heading` element inside a group that will be used as the group's header.

If you're using a custom template for the `uib-accordion-group`, you'll need to have an element for the heading to be transcluded into using `uib-accordion-header` (e.g. `<div uib-accordion-header></div>`).

### Known issues

To use clickable elements within the accordion, you have to override the accordion-group template to use div elements instead of anchor elements, and add `cursor: pointer` in your CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.

If custom classes on the accordion-group element are desired, one needs to either modify the template to remove the `ng-class` usage in the accordion-group template and use ng-class on the accordion-group element (not recommended), or use an interpolated expression in the class attribute, i.e. `<uib-accordion-group class="{{customClass()}}"></uib-accordion-group>`.

    <div ng-controller="AccordionDemoCtrl">
      <script type="text/ng-template" id="group-template.html">
        <div class="card-header">
          <h4 class="card-title" style="color:#fa39c3">
            <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
              <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
                {{heading}}
              </span>
            </a>
          </h4>
        </div>
        <div class="card-collapse collapse" uib-collapse="!isOpen">
          <div class="card-body" style="text-align: right" ng-transclude></div>
        </div>
      </script>

      <p>
        <button type="button" class="btn btn-secondary btn-sm" ng-click="status.open = !status.open">Toggle last card</button>
        <button type="button" class="btn btn-secondary btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first card</button>
      </p>

      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="oneAtATime">
          Open only one at a time
        </label>
      </div>
      <uib-accordion close-others="oneAtATime">
        <div uib-accordion-group class="mt-1" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
          This content is straight in the template.
        </div>
        <div uib-accordion-group class="mt-1" heading="{{group.title}}" ng-repeat="group in groups">
          {{group.content}}
        </div>
        <div uib-accordion-group class="mt-1" heading="Dynamic Body Content">
          <p>The body of the uib-accordion group grows to fit the contents</p>
          <button type="button" class="btn btn-secondary btn-sm" ng-click="addItem()">Add Item</button>
          <div ng-repeat="item in items">{{item}}</div>
        </div>
        <div uib-accordion-group class="mt-1" heading="Custom template" template-url="group-template.html">
          Hello
        </div>
        <div uib-accordion-group class="mt-1" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
          <uib-accordion-heading>
            Custom template with custom header template <i class="float-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
          </uib-accordion-heading>
          World
        </div>
        <div uib-accordion-group class="bg-danger" heading="Delete account">
          <p>Please, to delete your account, click the button below</p>
          <button class="btn btn-danger">Delete</button>
        </div>
        <div uib-accordion-group class="mt-1" is-open="status.open">
          <uib-accordion-heading>
            I can have markup, too! <i class="float-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
          </uib-accordion-heading>
          This is just some content to illustrate fancy headings.
        </div>
      </uib-accordion>
    </div>

    angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
      $scope.oneAtATime = true;

      $scope.groups = [
        {
          title: 'Dynamic Group Header - 1',
          content: 'Dynamic Group Body - 1'
        },
        {
          title: 'Dynamic Group Header - 2',
          content: 'Dynamic Group Body - 2'
        }
      ];

      $scope.items = ['Item 1', 'Item 2', 'Item 3'];

      $scope.addItem = function() {
        var newItemNo = $scope.items.length + 1;
        $scope.items.push('Item ' + newItemNo);
      };

      $scope.status = {
        isCustomHeaderOpen: false,
        isFirstOpen: true,
        isFirstDisabled: false
      };
    });

# Alert (ui.bootstrap.alert)

{{alert.msg}}
A happy alert!

This directive can be used both to generate alerts from static and dynamic model data (using the `ng-repeat` directive).

### uib-alert settings

- `close()` $ - A callback function that gets fired when an `alert` is closed. If the attribute exists, a close button is displayed as well.

- `dismiss-on-timeout` (Default: `none`) - Takes the number of milliseconds that specify the timeout duration, after which the alert will be closed. This attribute requires the presence of the `close` attribute.

- `template-url` (Default: `uib/template/alert/alert.html`) - Add the ability to override the template used in the component.

    <div ng-controller="AlertDemoCtrl">
      <script type="text/ng-template" id="alert.html">
        <div ng-transclude></div>
      </script>

      <div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($index)">{{alert.msg}}</div>
      <div uib-alert template-url="alert.html" style="background-color:#fa39c3;color:white">A happy alert!</div>
      <button type="button" class='btn btn-secondary' ng-click="addAlert()">Add Alert</button>
    </div>

    angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
      $scope.alerts = [
        { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
        { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
      ];

      $scope.addAlert = function() {
        $scope.alerts.push({msg: 'Another alert!'});
      };

      $scope.closeAlert = function(index) {
        $scope.alerts.splice(index, 1);
      };
    });

# Buttons (ui.bootstrap.buttons)

#### Single toggle

    {{singleModel}}

#### Checkbox

    Model: {{checkModel}}

    Results: {{checkResults}}

Left Middle Right

#### Radio & Uncheckable Radio

    {{radioModel || 'null'}}

Left Middle Right
Left Middle Right

With the buttons directive, we can make a group of buttons behave like a set of checkboxes (`uib-btn-checkbox`) or behave like a set of radio buttons (`uib-btn-radio`).

### uib-btn-checkbox settings

- `btn-checkbox-false` (Default: `false`) - Sets the value for the unchecked status.

- `btn-checkbox-true` (Default: `true`) - Sets the value for the checked status.

- `ng-model` $ - Model where we set the checkbox status. By default `true` or `false`.

### uib-btn-radio settings

- `ng-model` $ - Model where we set the radio status. All radio buttons in a group should use the same `ng-model`.

- `uib-btn-radio` - $ Value to assign to the `ng-model` if we check this radio button.

- `uib-uncheckable` $ (Default: `null`) - An expression that evaluates to a truthy or falsy value that determines whether the `uncheckable` attribute is present.

- `uncheckable` B - Whether a radio button can be unchecked or not.

### Additional settings `uibButtonConfig`

- `activeClass` (Default: `active`) - Class to apply to the checked buttons.

- `toggleEvent` (Default: `click`) - Event used to toggle the buttons.

### Known issues

To use tooltips or popovers on elements within a `btn-group`, set the tooltip/popover `appendToBody` option to `true`. This is due to Bootstrap CSS styling. See here for more information.

    <div ng-controller="ButtonsCtrl">
        <h4>Single toggle</h4>
        <pre>{{singleModel}}</pre>
        <button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
            Single Toggle
        </button>
        <h4>Checkbox</h4>
        <pre>Model: {{checkModel}}</pre>
        <pre>Results: {{checkResults}}</pre>
        <div class="btn-group">
            <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
            <label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
            <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
        </div>
        <h4>Radio &amp; Uncheckable Radio</h4>
        <pre>{{radioModel || 'null'}}</pre>
        <div class="btn-group">
            <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
            <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
            <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
        </div>
        <div class="btn-group">
            <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
            <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
            <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uib-uncheckable="uncheckable">Right</label>
        </div>
        <div>
            <button class="btn btn-secondary" ng-click="uncheckable = !uncheckable">
                Toggle uncheckable
            </button>
        </div>
    </div>

    angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) {
      $scope.singleModel = 1;

      $scope.radioModel = 'Middle';

      $scope.checkModel = {
        left: false,
        middle: true,
        right: false
      };

      $scope.checkResults = [];

      $scope.$watchCollection('checkModel', function () {
        $scope.checkResults = [];
        angular.forEach($scope.checkModel, function (value, key) {
          if (value) {
            $scope.checkResults.push(key);
          }
        });
      });
    });

# Carousel (ui.bootstrap.carousel)

#### Slide {{slide.id}}

{{slide.text}}

Disable Slide Looping
Interval, in milliseconds:
Enter a negative number or 0 to stop the interval.

Carousel creates a carousel similar to bootstrap's image carousel.

The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the `ngTouch` module as a dependency.

Use a `<uib-carousel>` element with `<uib-slide>` elements inside it.

### uib-carousel settings

- `active` (Default: `Index of first slide`) - Index of current active slide.

- `interval` $ (Default: `none`) - Sets an interval to cycle through the slides. You need a number bigger than 0 to make the interval work.

- `no-pause` $ (Default: `false`) - The interval pauses on mouseover. Setting this to truthy, disables this pause.

- `no-transition` $ (Default: `false`) - Whether to disable the transition animation between slides. Setting this to truthy, disables this transition.

- `no-wrap` $ (Default: `false`) - Disables the looping of slides. Setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping.

- `template-url` (Default: `uib/template/carousel/carousel.html`) - Add the ability to override the template used on the component.

### uib-slide settings

- `actual` $ (Default: `none`) - Use this attribute to bind the slide model (or any object of interest) onto the slide scope, which makes it available for customization in the carousel template.

- `index` $ (Default: `none`) - The index of the slide. Must be unique.

- `template-url` (Default: `uib/template/carousel/slide.html`) - Add the ability to override the template used on the component.

    <div ng-controller="CarouselDemoCtrl">
      <div style="height: 305px">
        <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
          <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="carousel-caption">
              <h4>Slide {{slide.id}}</h4>
              <p>{{slide.text}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
          <button type="button" class="btn btn-info" ng-click="randomize()">Randomize slides</button>
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-model="noWrapSlides">
              Disable Slide Looping
            </label>
          </div>
        </div>
        <div class="col-md-6">
          Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
          <br />Enter a negative number or 0 to stop the interval.
        </div>
      </div>
    </div>

    angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
      $scope.myInterval = 5000;
      $scope.noWrapSlides = false;
      $scope.active = 0;
      var slides = $scope.slides = [];
      var currIndex = 0;

      $scope.addSlide = function() {
        var newWidth = 600 + slides.length + 1;
        slides.push({
          image: '//unsplash.it/' + newWidth + '/300',
          text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
          id: currIndex++
        });
      };

      $scope.randomize = function() {
        var indexes = generateIndexesArray();
        assignNewIndexesToSlides(indexes);
      };

      for (var i = 0; i < 4; i++) {
        $scope.addSlide();
      }

      // Randomize logic below

      function assignNewIndexesToSlides(indexes) {
        for (var i = 0, l = slides.length; i < l; i++) {
          slides[i].id = indexes.pop();
        }
      }

      function generateIndexesArray() {
        var indexes = [];
        for (var i = 0; i < currIndex; ++i) {
          indexes[i] = i;
        }
        return shuffle(indexes);
      }

      // http://stackoverflow.com/questions/962802#962890
      function shuffle(array) {
        var tmp, current, top = array.length;

        if (top) {
          while (--top) {
            current = Math.floor(Math.random() * (top + 1));
            tmp = array[current];
            array[current] = array[top];
            array[top] = tmp;
          }
        }

        return array;
      }
    });

# Collapse (ui.bootstrap.collapse)

Resize window to less than 768 pixels to display mobile menu toggle button.

Some content

Some content

uib-collapse provides a simple way to hide and show an element with a css transition

### uib-collapse settings

- `collapsed()` $ - An optional expression called after the element finished collapsing.

- `collapsing()` $ - An optional expression called before the element begins collapsing. If the expression returns a promise, animation won't start until the promise resolves. If the returned promise is rejected, collapsing will be cancelled.

- `expanded()` $ - An optional expression called after the element finished expanding.

- `expanding()` $ - An optional expression called before the element begins expanding. If the expression returns a promise, animation won't start until the promise resolves. If the returned promise is rejected, expanding will be cancelled.

- `uib-collapse` $ (Default: `false`) - Whether the element should be collapsed or not.

- `horizontal` $ - An optional attribute that permit to collapse horizontally.

### Known Issues

When using the `horizontal` attribute with this directive, CSS can reflow as the collapse element goes from `0px` to its desired end width, which can result in height changes. This can cause animations to not appear to run. The best way around this is to set a fixed height via CSS on the horizontal collapse element so that this situation does not occur, and so the animation can run as expected.

    <style>
      .horizontal-collapse {
        height: 70px;
      }
      .navbar-collapse.in {
        overflow-y: hidden;
      }
    </style>
    <div ng-controller="CollapseDemoCtrl">
    	<p>Resize window to less than 768 pixels to display mobile menu toggle button.</p>
    	<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
    		<a class="navbar-brand" href="#">A menu</a>
    		<button class="navbar-toggler" type="button" ng-click="isNavCollapsed = !isNavCollapsed" aria-expanded="false" aria-label="Toggle navigation">
    			<span class="navbar-toggler-icon"></span>
    		</button>

    		<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
    			<ul class="navbar-nav mr-auto">
    				<li class="nav-item">
    					<a class="nav-link" href="#">Link 1</a>
    				</li>
    				<li class="nav-item">
    					<a class="nav-link" href="#">Link 2</a>
    				</li>
    			</ul>
    		</div>
    	</nav>
    	<hr>
    	<button type="button" class="btn btn-secondary" ng-click="isCollapsed = !isCollapsed">Toggle collapse Vertically</button>
    	<hr>
    	<div uib-collapse="isCollapsed" class="mb-3">
    		<div class="card">
    			<div class="card-body">
    				Some content
    			</div>
    		</div>
    	</div>

    	<button type="button" class="btn btn-secondary" ng-click="isCollapsedHorizontal = !isCollapsedHorizontal">Toggle collapse Horizontally</button>
    	<hr>
    	<div class="horizontal-collapse" uib-collapse="isCollapsedHorizontal" horizontal>
    		<div class="card">
    			<div class="card-body">
    				Some content
    			</div>
    		</div>
    	</div>
    </div>

    angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
      $scope.isNavCollapsed = true;
      $scope.isCollapsed = false;
      $scope.isCollapsedHorizontal = false;
    });

# Dateparser (ui.bootstrap.dateparser)

#### Formatting codes playground

Define your format

Result

The `uibDateParser` is what the `uib-datepicker` uses internally to parse the dates. You can use it standalone by injecting the `uibDateParser` service where you need it.

The public API for the dateParser is a single method called `parse`.

Certain format codes support i18n. Check this guide for more information.

### uibDateParser's parse function

##### parameters

- `input` (Type: `string`, Example: `2004/Sep/4`) - The input date to parse.

- `format` (Type: `string`, Example: `yyyy/MMM/d`) - The format we want to use. Check all the supported formats below.

- `baseDate` (Type: `Date`, Example: `new Date()`) - If you want to parse a date but maintain the timezone, you can pass an existing date here.

##### return

- If the specified input matches the format, a new date with the input will be returned, otherwise, it will return undefined.

### uibDateParser's format codes

- `yyyy` (Example: `2015`) - Parses a 4 digits year.

- `yy` (Example: `15`) - Parses a 2 digits year.

- `y` (Example: `15`) - Parses a year with 1, 2, 3, or 4 digits.

- `MMMM` (Example: `February`, i18n support) - Parses the full name of a month.

- `MMM` (Example: `Feb`, i18n support) - Parses the short name of a month.

- `MM` (Example: `12`, Leading 0) - Parses a numeric month.

- `M` (Example: `3`) - Parses a numeric month.

- `M!` (Example: `3` or `03`) - Parses a numeric month, but allowing an optional leading zero

- `LLLL` (Example: `February`, i18n support) - Stand-alone month in year (January-December). Requires Angular version 1.5.1 or higher.

- `dd` (Example: `05`, Leading 0) - Parses a numeric day.

- `d` (Example: `5`) - Parses a numeric day.

- `d!` (Example: `3` or `03`) - Parses a numeric day, but allowing an optional leading zero

- `EEEE` (Example: `Sunday`, i18n support) - Parses the full name of a day.

- `EEE` (Example: `Mon`, i18n support) - Parses the short name of a day.

- `HH` (Example: `14`, Leading 0) - Parses a 24 hours time.

- `H` (Example: `3`) - Parses a 24 hours time.

- `hh` (Example: `11`, Leading 0) - Parses a 12 hours time.

- `h` (Example: `3`) - Parses a 12 hours time.

- `mm` (Example: `09`, Leading 0) - Parses the minutes.

- `m` (Example: `3`) - Parses the minutes.

- `sss` (Example: `094`, Leading 0) - Parses the milliseconds.

- `ss` (Example: `08`, Leading 0) - Parses the seconds.

- `s` (Example: `22`) - Parses the seconds.

- `a` (Example: `10AM`) - Parses a 12 hours time with AM/PM.

- `Z` (Example: `-0800`) - Parses the timezone offset in a signed 4 digit representation

- `ww` (Example: `03`, Leading 0) - Parses the week number

- `w` (Example: `03`) - Parses the week number

- `G`, `GG`, `GGG` (Example: `AD`) - Parses the era (`AD` or `BC`)

- `GGGG` (Example: `Anno Domini`) - Parses the long form of the era (`Anno Domini` or `Before Christ`)

* The ones marked with `Leading 0`, needs a leading 0 for values less than 10. Exception being milliseconds which needs it for values under 100.

** It also supports `fullDate|longDate|medium|mediumDate|mediumTime|short|shortDate|shortTime` as the format for parsing.

*** It supports template literals as a string between the single quote `'` character, i.e. `'The Date is' MM/DD/YYYY`. If one wants the literal single quote character, one must use `''''`.

    <div ng-controller="DateParserDemoCtrl">
      <h4>Formatting codes playground</h4>
      <p class="form-group">
        <label>Define your format</label>
        <input type="text" ng-model="format" class="form-control">
      </p>
      <p class="form-group">
        <label>Result</label>
        <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" />
      </p>
    </div>

    angular.module('ui.bootstrap.demo').controller('DateParserDemoCtrl', function ($scope, uibDateParser) {
      $scope.format = 'yyyy/MM/dd';
      $scope.date = new Date();
    });

# Datepicker (ui.bootstrap.datepicker)

    Selected date is: {{dt | date:'fullDate' }}

#### Inline

Our datepicker is flexible and fully customizable.

You can navigate through days, months and years.

The datepicker has 3 modes:

- `day` - In this mode you're presented with a 6-week calendar for a specified month.
- `month` - In this mode you can select a month within a selected year.
- `year` - In this mode you are presented with a range of years (20 by default).

### uib-datepicker settings

- `ng-model` $ - The date object. Must be a Javascript `Date` object. You may use the `uibDateParser` service to assist in string-to-object conversion.

- `ng-model-options` $ C (Default: `{}`) - Supported angular ngModelOptions:

  - allowInvalid
  - timezone

- `template-url` (Default: `uib/template/datepicker/datepicker.html`) - Add the ability to override the template used on the component.

Apart from the previous settings, to configure the uib-datepicker you need to create an object in Javascript with all the options and use it on the `datepicker-options` attribute:

- `datepicker-options` $ - An object to configure the datepicker in one place.

  - `customClass ({date: date, mode: mode})` - An optional expression to add classes based on passing an object with date and current mode properties.

  - `dateDisabled ({date: date, mode: mode})` - An optional expression to disable visible options based on passing an object with date and current mode properties.

  - `datepickerMode` C (Default: `day`) - Current mode of the datepicker (day|month|year). Can be used to initialize the datepicker in a specific mode.

  - `formatDay` C (Default: `dd`) - Format of day in month.

  - `formatMonth` C (Default: `MMMM`) - Format of month in year.

  - `formatYear` C (Default: `yyyy`) - Format of year in year range.

  - `formatDayHeader` C (Default: `EEE`) - Format of day in week header.

  - `formatDayTitle` C (Default: `MMMM yyyy`) - Format of title when selecting day.

  - `formatMonthTitle` C (Default: `yyyy`) - Format of title when selecting month.

  - `initDate` (Default: `null`) - The initial date view when no model value is specified.

  - `maxDate` C (Default: `null`) - Defines the maximum available date. Requires a Javascript Date object.

  - `maxMode` C (Default: `year`) - Sets an upper limit for mode.

  - `minDate` C (Default: `null`) - Defines the minimum available date. Requires a Javascript Date object.

  - `minMode` C (Default: `day`) - Sets a lower limit for mode.

  - `monthColumns` C (Default: `3`) - Number of columns displayed in month selection.

  - `ngModelOptions` C (Default: `null`) - Sets `ngModelOptions` for datepicker. This can be overridden through attribute usage

  - `shortcutPropagation` C (Default: `false`) - An option to disable the propagation of the keydown event.

  - `showWeeks` C (Default: `true`) - Whether to display week numbers.

  - `startingDay` C (Default: `$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK`) - Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).

  - `yearRows` C (Default: `4`) - Number of rows displayed in year selection.

  - `yearColumns` C (Default: `5`) - Number of columns displayed in year selection.

### Keyboard support

Depending on datepicker's current mode, the date may refer either to day, month or year. Accordingly, the term view refers either to a month, year or year range.

- `Left`: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.
- `Right`: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.
- `Up`: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.
- `Down`: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.
- `PgUp`: Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.
- `PgDn`: Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.
- `Home`: Move to the first date of the view.
- `End`: Move to the last date of the view.
- `Enter`/`Space`: Select date.
- `Ctrl`+`Up`: Move to an upper mode.
- `Ctrl`+`Down`: Move to a lower mode.
- `Esc`: Will close popup, and move focus to the input.

Notes

If the date a user enters falls outside of the min-/max-date range, a `dateDisabled` validation error will show on the form.

    <style>
      .full button span {
        background-color: limegreen;
        border-radius: 32px;
        color: black;
      }
      .partially button span {
        background-color: orange;
        border-radius: 32px;
        color: black;
      }
    </style>
    <div ng-controller="DatepickerDemoCtrl">
        <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

        <h4>Inline</h4>
        <div style="display:inline-block; min-height:290px;">
          <div uib-datepicker ng-model="dt" class="card" datepicker-options="options"></div>
        </div>

        <hr />
        <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
        <button type="button" class="btn btn-sm btn-secondary" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
        <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
        <button type="button" class="btn btn-sm btn-secondary" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
    </div>

    angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
      $scope.today = function() {
        $scope.dt = new Date();
      };
      $scope.today();

      $scope.clear = function() {
        $scope.dt = null;
      };

      $scope.options = {
        customClass: getDayClass,
        minDate: new Date(),
        showWeeks: true
      };

      // Disable weekend selection
      function disabled(data) {
        var date = data.date,
          mode = data.mode;
        return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
      }

      $scope.toggleMin = function() {
        $scope.options.minDate = $scope.options.minDate ? null : new Date();
      };

      $scope.toggleMin();

      $scope.setDate = function(year, month, day) {
        $scope.dt = new Date(year, month, day);
      };

      var tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate() + 1);
      var afterTomorrow = new Date(tomorrow);
      afterTomorrow.setDate(tomorrow.getDate() + 1);
      $scope.events = [
        {
          date: tomorrow,
          status: 'full'
        },
        {
          date: afterTomorrow,
          status: 'partially'
        }
      ];

      function getDayClass(data) {
        var date = data.date,
          mode = data.mode;
        if (mode === 'day') {
          var dayToCheck = new Date(date).setHours(0,0,0,0);

          for (var i = 0; i < $scope.events.length; i++) {
            var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

            if (dayToCheck === currentDay) {
              return $scope.events[i].status;
            }
          }
        }

        return '';
      }
    });

# Datepicker Popup (ui.bootstrap.datepickerPopup)

    Selected date is: {{dt | date:'fullDate' }}

#### Popup

Format: (manual alternate {{altInputFormats[0]}})

The datepicker popup is meant to be used with an input element. To understand usage of the datepicker, please refer to its documentation here.

### uib-datepicker-popup settings

The popup is a wrapper that you can use in an input to toggle a datepicker. To configure the datepicker, use `datepicker-options` as documented in the inline datepicker.

- `alt-input-formats` $ C (Default: `[]`) - A list of alternate formats acceptable for manual entry.

- `clear-text` C (Default: `Clear`) - The text to display for the clear button.

- `close-on-date-selection` $ C (Default: `true`) - Whether to close calendar when a date is chosen.

- `close-text` C (Default: `Done`) - The text to display for the close button.

- `current-text` C (Default: `Today`) - The text to display for the current day button.

- `datepicker-append-to-body` $ C (Default: `false`, Config: `appendToBody`) - Append the datepicker popup element to `body`, rather than inserting after `datepicker-popup`.

- `datepicker-options` $ - An object with any combination of the datepicker settings (in camelCase) used to configure the wrapped datepicker.

- `datepicker-popup-template-url` C (Default: `uib/template/datepickerPopup/popup.html`) - Add the ability to override the template used on the component.

- `datepicker-template-url` C (Default: `uib/template/datepicker/datepicker.html`) - Add the ability to override the template used on the component (inner uib-datepicker).

- `is-open` $ (Default: `false`) - Whether or not to show the datepicker.

- `ng-model` $ - The date object. Must be a Javascript `Date` object. You may use the `uibDateParser` service to assist in string-to-object conversion.

- `on-open-focus` $ C (Default: `true`) - Whether or not to focus the datepicker popup upon opening.

- `show-button-bar` $ C (Default: `true`) - Whether or not to display a button bar underneath the uib-datepicker.

- `type` C (Default: `text`, Config: `html5Types`) - You can override the input type to be (date|datetime-local|month). That will change the date format of the popup.

- `popup-placement` C (Default: `auto bottom-left`, Config: 'placement') - Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popup will attempt to position where it fits in the closest scrollable ancestor. Accepts:

  - `top` - popup on top, horizontally centered on input element.
  - `top-left` - popup on top, left edge aligned with input element left edge.
  - `top-right` - popup on top, right edge aligned with input element right edge.
  - `bottom` - popup on bottom, horizontally centered on input element.
  - `bottom-left` - popup on bottom, left edge aligned with input element left edge.
  - `bottom-right` - popup on bottom, right edge aligned with input element right edge.
  - `left` - popup on left, vertically centered on input element.
  - `left-top` - popup on left, top edge aligned with input element top edge.
  - `left-bottom` - popup on left, bottom edge aligned with input element bottom edge.
  - `right` - popup on right, vertically centered on input element.
  - `right-top` - popup on right, top edge aligned with input element top edge.
  - `right-bottom` - popup on right, bottom edge aligned with input element bottom edge.

- `uib-datepicker-popup` C (Default: `yyyy-MM-dd`, Config: `datepickerConfig`) - The format for displayed dates. This string can take string literals by surrounding the value with single quotes, i.e. `yyyy-MM-dd h 'o\'clock'`.

Notes

If using this directive on input type date, a native browser datepicker could also appear.

    <style>
      .full button span {
        background-color: limegreen;
        border-radius: 32px;
        color: black;
      }
      .partially button span {
        background-color: orange;
        border-radius: 32px;
        color: black;
      }
    </style>
    <div ng-controller="DatepickerPopupDemoCtrl">
        <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

        <h4>Popup</h4>
        <div class="row">
          <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-secondary" ng-click="open1()">
                  <i class="fa-svg-icon">
                    <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M192 1664h288v-288h-288v288zm352 0h320v-288h-320v288zm-352-352h288v-320h-288v320zm352 0h320v-320h-320v320zm-352-384h288v-288h-288v288zm736 736h320v-288h-320v288zm-384-736h320v-288h-320v288zm768 736h288v-288h-288v288zm-384-352h320v-320h-320v320zm-352-864v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm736 864h288v-320h-288v320zm-384-384h320v-288h-320v288zm384 0h288v-288h-288v288zm32-480v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z"/></svg>
                  </i>
                </button>
              </span>
            </p>
          </div>

          <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-secondary" ng-click="open2()">
                  <i class="fa-svg-icon">
                    <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M192 1664h288v-288h-288v288zm352 0h320v-288h-320v288zm-352-352h288v-320h-288v320zm352 0h320v-320h-320v320zm-352-384h288v-288h-288v288zm736 736h320v-288h-320v288zm-384-736h320v-288h-320v288zm768 736h288v-288h-288v288zm-384-352h320v-320h-320v320zm-352-864v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm736 864h288v-320h-288v320zm-384-384h320v-288h-320v288zm384 0h288v-288h-288v288zm32-480v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z"/></svg>
                  </i>
                </button>
              </span>
            </p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
          </div>
        </div>

        <hr />
        <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
        <button type="button" class="btn btn-sm btn-secondary" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
        <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
        <button type="button" class="btn btn-sm btn-secondary" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
    </div>

    angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
      $scope.today = function() {
        $scope.dt = new Date();
      };
      $scope.today();

      $scope.clear = function() {
        $scope.dt = null;
      };

      $scope.inlineOptions = {
        customClass: getDayClass,
        minDate: new Date(),
        showWeeks: true
      };

      $scope.dateOptions = {
        dateDisabled: disabled,
        formatYear: 'yy',
        maxDate: new Date(2020, 5, 22),
        minDate: new Date(),
        startingDay: 1
      };

      // Disable weekend selection
      function disabled(data) {
        var date = data.date,
          mode = data.mode;
        return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
      }

      $scope.toggleMin = function() {
        $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
        $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
      };

      $scope.toggleMin();

      $scope.open1 = function() {
        $scope.popup1.opened = true;
      };

      $scope.open2 = function() {
        $scope.popup2.opened = true;
      };

      $scope.setDate = function(year, month, day) {
        $scope.dt = new Date(year, month, day);
      };

      $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
      $scope.format = $scope.formats[0];
      $scope.altInputFormats = ['M!/d!/yyyy'];

      $scope.popup1 = {
        opened: false
      };

      $scope.popup2 = {
        opened: false
      };

      var tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate() + 1);
      var afterTomorrow = new Date();
      afterTomorrow.setDate(tomorrow.getDate() + 1);
      $scope.events = [
        {
          date: tomorrow,
          status: 'full'
        },
        {
          date: afterTomorrow,
          status: 'partially'
        }
      ];

      function getDayClass(data) {
        var date = data.date,
          mode = data.mode;
        if (mode === 'day') {
          var dayToCheck = new Date(date).setHours(0,0,0,0);

          for (var i = 0; i < $scope.events.length; i++) {
            var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

            if (dayToCheck === currentDay) {
              return $scope.events[i].status;
            }
          }
        }

        return '';
      }
    });

# Dropdown (ui.bootstrap.dropdown)

Click me for a dropdown, yo!

#### append-to vs. append-to-body vs. inline example

Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.

This directive is composed by three parts:

- `uib-dropdown` which transforms a node into a dropdown.
- `uib-dropdown-toggle` which allows the dropdown to be toggled via click. This directive is optional.
- `uib-dropdown-menu` which transforms a node into the popup menu.

Each of these parts need to be used as attribute directives.

### uib-dropdown settings

- `auto-close` (Default: `always`) - Controls the behavior of the menu when clicked.

  - `always` - Automatically closes the dropdown when any of its elements is clicked.
  - `disabled` - Disables the auto close. You can control it manually with `is-open`. It still gets closed if the toggle is clicked, `esc` is pressed or another dropdown is open.
  - `outsideClick` - Closes the dropdown automatically only when the user clicks any element outside the dropdown.

- `dropdown-append-to` $ (Default: `null`) - Appends the inner dropdown-menu to an arbitrary DOM element.

- `dropdown-append-to-body` B (Default: `false`) - Appends the inner dropdown-menu to the body element if the attribute is present without a value, or with a non `false` value.

- `is-open` $ (Default: `false`) - Defines whether or not the dropdown-menu is open. The `uib-dropdown-toggle` will toggle this attribute on click.

- `keyboard-nav`: B (Default: `false`) - Enables navigation of dropdown list elements with the arrow keys.

- `on-toggle(open)` $ - An optional expression called when the dropdown menu is opened or closed.

### uib-dropdown-menu settings

- `template-url` (Default: `none`) - You may specify a template for the dropdown menu. Check the demos for an example.

### Additional settings `uibDropdownConfig`

- `appendToOpenClass` (Default: `uib-dropdown-open`) - Class to apply when the dropdown is open and appended to a different DOM element.

- `openClass` (Default: `open`) - Class to apply when the dropdown is open.

### Known issues

For usage with ngTouch, it is recommended to use the programmatic `is-open` trigger with ng-click - this is due to ngTouch decorating ng-click to prevent propagation of the event.

    <div ng-controller="DropdownCtrl">
        <div>
            <!-- Simple dropdown -->
            <span uib-dropdown on-toggle="toggled(open)" class="mb-2">
              <a href id="simple-dropdown" uib-dropdown-toggle>
                Click me for a dropdown, yo!
              </a>
              <div class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
                <a href ng-repeat="choice in items" class="dropdown-item">
                  {{choice}}
                </a>
              </div>
            </span>

            <br>

            <!-- Single button -->
            <div class="btn-group mb-2" uib-dropdown is-open="status.isopen">
              <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
                Button dropdown <span class="caret"></span>
              </button>
              <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
              </div>
            </div>

            <br>

            <!-- Split button -->
            <div class="btn-group mb-2" uib-dropdown>
              <button id="split-button" type="button" class="btn btn-danger">Action</button>
              <button type="button" class="btn btn-danger" uib-dropdown-toggle>
                <span class="caret"></span>
                <span class="sr-only">Split button!</span>
              </button>
              <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-button">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
              </div>
            </div>

            <br>

            <!-- Single button using append-to-body -->
            <div class="btn-group mb-2" uib-dropdown dropdown-append-to-body>
              <button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
                Dropdown on Body <span class="caret"></span>
              </button>
              <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
              </div>
            </div>

            <br>

            <!-- Single button using template-url -->
            <div class="btn-group mb-2" uib-dropdown>
              <button id="button-template-url" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
                Dropdown using template <span class="caret"></span>
              </button>
              <div class="dropdown-menu" uib-dropdown-menu template-url="dropdown.html" aria-labelledby="button-template-url">
              </div>
            </div>
        </div>

        <hr />
        <p>
            <button type="button" class="btn btn-secondary btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
            <button type="button" class="btn btn-warning btn-sm" ng-click="disabled = !disabled">Enable/Disable</button>
        </p>

        <hr>
        <!-- Single button with keyboard nav -->
        <div class="btn-group" uib-dropdown keyboard-nav>
            <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
                Dropdown with keyboard navigation <span class="caret"></span>
            </button>
            <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>

        <hr>
        <!-- AppendTo use case -->
        <h4>append-to vs. append-to-body vs. inline example</h4>
        <div id="dropdown-scrollable-container" style="height: 15em; overflow: auto;">
          <div id="dropdown-long-content">
            <div id="dropdown-hidden-container">
              <div class="btn-group" uib-dropdown keyboard-nav dropdown-append-to="appendToEl">
                <button id="btn-append-to" type="button" class="btn btn-primary" uib-dropdown-toggle>
                  Dropdown in Container <span class="caret"></span>
                </button>
                <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to">
                  <a href="#" class="dropdown-item">Action</a>
                  <a href="#" class="dropdown-item">Another action</a>
                  <a href="#" class="dropdown-item">Something else here</a>
                  <div class="dropdown-divider"></div>
                  <a href="#" class="dropdown-item">Separated link</a>
                </div>
              </div>
              <div class="btn-group" uib-dropdown dropdown-append-to-body>
                <button id="btn-append-to-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
                  Dropdown on Body <span class="caret"></span>
                </button>
                <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body">
                  <a href="#" class="dropdown-item">Action</a>
                  <a href="#" class="dropdown-item">Another action</a>
                  <a href="#" class="dropdown-item">Something else here</a>
                  <div class="dropdown-divider"></div>
                  <a href="#" class="dropdown-item">Separated link</a>
                </div>
              </div>
              <div class="btn-group" uib-dropdown>
                <button id="btn-append-to-single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
                  Inline Dropdown <span class="caret"></span>
                </button>
                <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-single-button">
                  <a href="#" class="dropdown-item">Action</a>
                  <a href="#" class="dropdown-item">Another action</a>
                  <a href="#" class="dropdown-item">Something else here</a>
                  <div class="dropdown-divider"></div>
                  <a href="#" class="dropdown-item">Separated link</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <script type="text/ng-template" id="dropdown.html">
            <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="button-template-url">
              <a href="#" class="dropdown-item">Action in Template</a>
              <a href="#" class="dropdown-item">Another action in Template</a>
              <a href="#" class="dropdown-item">Something else here</a>
              <div class="dropdown-divider"></div>
              <a href="#" class="dropdown-item">Separated link in Template</a>
            </div>
        </script>
    </div>

    angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
      $scope.items = [
        'The first choice!',
        'And another choice for you.',
        'but wait! A third!'
      ];

      $scope.status = {
        isopen: false
      };

      $scope.toggled = function(open) {
        $log.log('Dropdown is now: ', open);
      };

      $scope.toggleDropdown = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.status.isopen = !$scope.status.isopen;
      };

      $scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
    });

# Modal (ui.bootstrap.modal)

Selection from a modal: {{ $ctrl.selected }}

`$uibModal` is a service to create modal windows. Creating modals is straightforward: create a template and controller, and reference them when using `$uibModal`.

The `$uibModal` service has only one method: `open(options)`.

### $uibModal's open function

#### options parameter

- `animation` (Type: `boolean`, Default: `true`) - Set to false to disable animations on new modal/backdrop. Does not toggle animations for modals/backdrops that are already displayed.

- `appendTo` (Type: `angular.element`, Default: `body`: Example: `$document.find('aside').eq(0)`) - Appends the modal to a specific element.

- `ariaDescribedBy` (Type: `string`, `my-modal-description`) - Sets the `aria-describedby` property on the modal. The value should be an id (without the leading `#`) pointing to the element that describes your modal. Typically, this will be the text on your modal, but does not include something the user would interact with, like buttons or a form. Omitting this option will not impact sighted users but will weaken your accessibility support.

- `ariaLabelledBy` (Type: `string`, `my-modal-title`) - Sets the `aria-labelledby` property on the modal. The value should be an id (without the leading `#`) pointing to the element that labels your modal. Typically, this will be a header element. Omitting this option will not impact sighted users but will weaken your accessibility support.

- `backdrop` (Type: `boolean|string`, Default: `true`) - Controls presence of a backdrop. Allowed values: `true` (default), `false` (no backdrop), `'static'` (disables modal closing by click on the backdrop).

- `backdropClass` (Type: `string`) - Additional CSS class(es) to be added to a modal backdrop template.

- `bindToController` (Type: `boolean`, Default: `false`) - When used with `controllerAs` & set to `true`, it will bind the $scope properties onto the controller.

- `component` (Type: `string`, Example: `myComponent`) - A string reference to the component to be rendered that is registered with Angular's compiler. If using a directive, the directive must have `restrict: 'E'` and a template or templateUrl set.

  It supports these bindings:

  - `close` - A method that can be used to close a modal, passing a result. The result must be passed in this format: `{$value: myResult}`

  - `dismiss` - A method that can be used to dismiss a modal, passing a result. The result must be passed in this format: `{$value: myRejectedResult}`

  - `modalInstance` - The modal instance. This is the same `$uibModalInstance` injectable found when using `controller`.

  - `resolve` - An object of the modal resolve values. See UI Router resolves for details.

- `controller` (Type: `function|string|array`, Example: `MyModalController`) - A controller for the modal instance, either a controller name as a string, or an inline controller function, optionally wrapped in array notation for dependency injection. Allows the controller-as syntax. Has a special `$uibModalInstance` injectable to access the modal instance.

- `controllerAs` (Type: `string`, Example: `ctrl`) - An alternative to the controller-as syntax. Requires the `controller` option to be provided as well.

- `keyboard` - (Type: `boolean`, Default: `true`) - Indicates whether the dialog should be closable by hitting the ESC key.

- `openedClass` (Type: `string`, Default: `modal-open`) - Class added to the `body` element when the modal is opened.

- `resolve` (Type: `Object`) - Members that will be resolved and passed to the controller as locals; it is equivalent of the `resolve` property in the router.

- `scope` (Type: `$scope`) - The parent scope instance to be used for the modal's content. Defaults to `$rootScope`.

- `size` (Type: `string`, Example: `lg`) - Optional suffix of modal window class. The value used is appended to the `modal-` class, i.e. a value of `sm` gives `modal-sm`. (Note: Since this is directly injected into the class for the modal, you can leverage additional Bootstrap modal classes, such as `modal-dialog-centered`. Ex: `md modal-dialog-centered`.)

- `scrollable` (Type: `boolean`, Default: `false`) - Indicates whether the dialog will allow its content to scroll. If set to true, this will add the class 'modal-dialog-scrollable' to the rendered modal.

- `template` (Type: `string`) - Inline template representing the modal's content.

- `templateUrl` (Type: `string`) - A path to a template representing modal's content. You need either a `template` or `templateUrl`.

- `windowClass` (Type: `string`) - Additional CSS class(es) to be added to a modal window template.

- `windowTemplateUrl` (Type: `string`, Default: `uib/template/modal/window.html`) - A path to a template overriding modal's window template.

- `windowTopClass` (Type: `string`) - CSS class(es) to be added to the top modal window.

Global defaults may be set for `$uibModal` via `$uibModalProvider.options`.

#### return

The `open` method returns a modal instance, an object with the following properties:

- `close(result)` (Type: `function`) - Can be used to close a modal, passing a result.

- `dismiss(reason)` (Type: `function`) - Can be used to dismiss a modal, passing a reason.

- `result` (Type: `promise`) - Is resolved when a modal is closed and rejected when a modal is dismissed.

- `opened` (Type: `promise`) - Is resolved when a modal gets opened after downloading content's template and resolving all variables.

- `closed` (Type: `promise`) - Is resolved when a modal is closed and the animation completes.

- `rendered` (Type: `promise`) - Is resolved when a modal is rendered.

The scope associated with modal's content is augmented with:

- `$close(result)` (Type: `function`) - A method that can be used to close a modal, passing a result.

- `$dismiss(reason)` (Type: `function`) - A method that can be used to dismiss a modal, passing a reason.

Those methods make it easy to close a modal window without a need to create a dedicated controller.

Also, when using `bindToController`, you can define an `$onInit` method in the controller that will fire upon initialization.

Events fired:

- `$uibUnscheduledDestruction` - This event is fired if the $scope is destroyed via unexpected mechanism, such as it being passed in the modal options and a $route/$state transition occurs. The modal will also be dismissed.

- `modal.closing` - This event is broadcast to the modal scope before the modal closes. If the listener calls preventDefault() on the event, then the modal will remain open. Also, the `$close` and `$dismiss` methods returns true if the event was executed. This event also includes a parameter for the result/reason and a boolean that indicates whether the modal is being closed (true) or dismissed.

##### UI Router resolves

If one wants to have the modal resolve using UI Router's pre-1.0 resolve mechanism, one can call `$uibResolve.setResolver('$resolve')` in the configuration phase of the application. One can also provide a custom resolver as well, as long as the signature conforms to UI Router's $resolve.

When the modal is opened with a controller, a `$resolve` object is exposed on the template with the resolved values from the resolve object. If using the component option, see details on how to access this object in component section of the modal documentation.

    <div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
        <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
            </div>
            <div class="modal-body" id="modal-body">
                <ul>
                    <li ng-repeat="item in $ctrl.items">
                        <a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a>
                    </li>
                </ul>
                Selected: <b>{{ $ctrl.selected.item }}</b>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
                <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
            </div>
        </script>
        <script type="text/ng-template" id="stackedModal.html">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
            </div>
            <div class="modal-body" id="modal-body-{{name}}">
                Having multiple modals open at once is probably bad UX but it's technically possible.
            </div>
        </script>

        <button type="button" class="btn btn-secondary" ng-click="$ctrl.open()">Open me!</button>
        <button type="button" class="btn btn-secondary" ng-click="$ctrl.open('lg')">Large modal</button>
        <button type="button" class="btn btn-secondary" ng-click="$ctrl.open('sm')">Small modal</button>
        <button type="button"
            class="btn btn-secondary"
            ng-click="$ctrl.open('sm', '.modal-parent')">
                Modal appended to a custom parent
        </button>
        <button type="button" class="btn btn-secondary" ng-click="$ctrl.toggleAnimation()">Toggle Animation ({{ $ctrl.animationsEnabled }})</button>
        <button type="button" class="btn btn-secondary" ng-click="$ctrl.openComponentModal()">Open a component modal!</button>
        <button type="button" class="btn btn-secondary" ng-click="$ctrl.openMultipleModals()">
            Open multiple modals at once
        </button>
        <div ng-show="$ctrl.selected">Selection from a modal: {{ $ctrl.selected }}</div>
        <div class="modal-parent">
        </div>
    </div>

    angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log, $document) {
      var $ctrl = this;
      $ctrl.items = ['item1', 'item2', 'item3'];

      $ctrl.animationsEnabled = true;

      $ctrl.open = function (size, parentSelector) {
        var parentElem = parentSelector ?
          angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
        var modalInstance = $uibModal.open({
          animation: $ctrl.animationsEnabled,
          ariaLabelledBy: 'modal-title',
          ariaDescribedBy: 'modal-body',
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          controllerAs: '$ctrl',
          size: size,
          appendTo: parentElem,
          resolve: {
            items: function () {
              return $ctrl.items;
            }
          }
        });

        modalInstance.result.then(function (selectedItem) {
          $ctrl.selected = selectedItem;
        }, function () {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };

      $ctrl.openComponentModal = function () {
        var modalInstance = $uibModal.open({
          animation: $ctrl.animationsEnabled,
          component: 'modalComponent',
          resolve: {
            items: function () {
              return $ctrl.items;
            }
          }
        });

        modalInstance.result.then(function (selectedItem) {
          $ctrl.selected = selectedItem;
        }, function () {
          $log.info('modal-component dismissed at: ' + new Date());
        });
      };

      $ctrl.openMultipleModals = function () {
        $uibModal.open({
          animation: $ctrl.animationsEnabled,
          ariaLabelledBy: 'modal-title-bottom',
          ariaDescribedBy: 'modal-body-bottom',
          templateUrl: 'stackedModal.html',
          size: 'sm',
          controller: function($scope) {
            $scope.name = 'bottom';
          }
        });

        $uibModal.open({
          animation: $ctrl.animationsEnabled,
          ariaLabelledBy: 'modal-title-top',
          ariaDescribedBy: 'modal-body-top',
          templateUrl: 'stackedModal.html',
          size: 'sm',
          controller: function($scope) {
            $scope.name = 'top';
          }
        });
      };

      $ctrl.toggleAnimation = function () {
        $ctrl.animationsEnabled = !$ctrl.animationsEnabled;
      };
    });

    // Please note that $uibModalInstance represents a modal window (instance) dependency.
    // It is not the same as the $uibModal service used above.

    angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
      var $ctrl = this;
      $ctrl.items = items;
      $ctrl.selected = {
        item: $ctrl.items[0]
      };

      $ctrl.ok = function () {
        $uibModalInstance.close($ctrl.selected.item);
      };

      $ctrl.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };
    });

    // Please note that the close and dismiss bindings are from $uibModalInstance.

    angular.module('ui.bootstrap.demo').component('modalComponent', {
      templateUrl: 'myModalContent.html',
      bindings: {
        resolve: '<',
        close: '&',
        dismiss: '&'
      },
      controller: function () {
        var $ctrl = this;

        $ctrl.$onInit = function () {
          $ctrl.items = $ctrl.resolve.items;
          $ctrl.selected = {
            item: $ctrl.items[0]
          };
        };

        $ctrl.ok = function () {
          $ctrl.close({$value: $ctrl.selected.item});
        };

        $ctrl.cancel = function () {
          $ctrl.dismiss({$value: 'cancel'});
        };
      }
    });

# Pager (ui.bootstrap.pager)

#### Pager

    You are currently on page {{currentPage}}

A lightweight pager directive that is focused on providing previous/next paging functionality

### uib-pager settings

- `align` C (Default: `true`) - Whether to align each link to the sides.

- `items-per-page` $ C (Default: `10`) - Maximum number of items per page. A value less than one indicates all items on one page.

- `next-text` C (Default: `Next »`) - Text for Next button.

- `ng-disabled` $ (Default: `false`) - Used to disable the pager component.

- `ng-model` $ - Current page number. First page is 1.

- `num-pages` $ readonly (Default: `angular.noop`) - An optional expression assigned the total number of pages to display.

- `previous-text` C (Default: `« Previous`) - Text for Previous button.

- `template-url` (Default: `uib/template/pager/pager.html`) - Override the template for the component with a custom provided template.

- `total-items` $ - Total number of items in all pages.

    <div ng-controller="PagerDemoCtrl">
      <h4>Pager</h4>
      <pre>You are currently on page {{currentPage}}</pre>
      <ul uib-pager total-items="totalItems" ng-model="currentPage"></ul>
    </div>

    angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
      $scope.totalItems = 64;
      $scope.currentPage = 4;
    });

# Pagination (ui.bootstrap.pagination)

#### Default

    The selected page no: {{currentPage}}

#### Limit the maximum visible buttons

###### `rotate` defaulted to `true`:

###### `rotate` defaulted to `true` and `force-ellipses` set to `true`:

###### `rotate` set to `false`:

###### `boundary-link-numbers` set to `true` and `rotate` defaulted to `true`:

###### `boundary-link-numbers` set to `true` and `rotate` set to `false`:

    Page: {{bigCurrentPage}} / {{numPages}}

A lightweight pagination directive that is focused on ... providing pagination & will take care of visualising a pagination bar and enable / disable buttons correctly!

### uib-pagination settings

- `boundary-links` C (Default: `false`) - Whether to display First / Last buttons.

- `boundary-link-numbers` $ C (Default: `false`) - Whether to always display the first and last page numbers. If `max-size` is smaller than the number of pages, then the first and last page numbers are still shown with ellipses in-between as necessary. NOTE: `max-size` refers to the center of the range. This option may add up to 2 more numbers on each side of the displayed range for the end value and what would be an ellipsis but is replaced by a number because it is sequential.

- `direction-links` $ C (Default: `true`) - Whether to display Previous / Next buttons.

- `first-text` C (Default: `First`) - Text for First button.

- `force-ellipses` $ C (Default: `false`) - Also displays ellipses when `rotate` is true and `max-size` is smaller than the number of pages.

- `items-per-page` $ C (Default: `10`) - Maximum number of items per page. A value less than one indicates all items on one page.

- `last-text` C (Default: `Last`) - Text for Last button.

- `max-size` $ (Default: `null`) - Limit number for pagination size.

- `next-text` C (Default: `Next`) - Text for Next button.

- `ng-change` $ - This can be used to call a function whenever the page changes.

- `ng-disabled` $ (Default: `false`) - Used to disable the pagination component.

- `ng-model` $ - Current page number. First page is 1.

- `num-pages` $ readonly (Default: `angular.noop`) - An optional expression assigned the total number of pages to display.

- `page-label` (Default: `angular.identity`) - An optional expression to override the page label based on passing the current page indexes. Supports page number with `$page` in the template.

- `previous-text` C (Default: `Previous`) - Text for Previous button.

- `rotate` $ C (Default: `true`) - Whether to keep current page in the middle of the visible ones.

- `template-url` (Default: `uib/template/pagination/pagination.html`) - Override the template for the component with a custom provided template

- `total-items` $ - Total number of items in all pages.

    <div ng-controller="PaginationDemoCtrl">
        <h4>Default</h4>
        <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></ul>
        <ul uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></ul>
        <ul uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></ul>
        <ul uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></ul>
        <pre>The selected page no: {{currentPage}}</pre>
        <button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

        <hr />
        <h4>Limit the maximum visible buttons</h4>
        <h6><code>rotate</code> defaulted to <code>true</code>:</h6>
        <ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages"></ul>
        <h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>
        <ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></ul>
        <h6><code>rotate</code> set to <code>false</code>:</h6>
        <ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></ul>
        <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> defaulted to <code>true</code>:</h6>
        <ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></ul>
        <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> set to <code>false</code>:</h6>
        <ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></ul>
        <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>

    </div>

    angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {
      $scope.totalItems = 64;
      $scope.currentPage = 4;

      $scope.setPage = function (pageNo) {
        $scope.currentPage = pageNo;
      };

      $scope.pageChanged = function() {
        $log.log('Page changed to: ' + $scope.currentPage);
      };

      $scope.maxSize = 5;
      $scope.bigTotalItems = 175;
      $scope.bigCurrentPage = 1;
    });

# Popover (ui.bootstrap.popover)

#### Dynamic

Popup Text:
Popup Title:
Popup Template:

#### Positional

Popover placement

#### Triggers

#### Other

A lightweight, extensible directive for fancy popover creation. The popover directive supports multiple placements, optional transition animation, and more.

Like the Bootstrap jQuery plugin, the popover requires the tooltip module.

Note to mobile developers: Please note that while popovers may work correctly on mobile devices (including tablets), we have made the decision to not officially support such a use-case because it does not make sense from a UX perspective.

There are three versions of the popover: `uib-popover` and `uib-popover-template`, and `uib-popover-html`:

- `uib-popover` - Takes text only and will escape any HTML provided for the popover body.
- `uib-popover-html` $ - Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the `uib-popover-template` attribute option instead. The user is responsible for ensuring the content is safe to put into the DOM!
- `uib-popover-template` $ - A URL representing the location of a template to use for the popover body. Note that the contents of this template need to be wrapped in a tag, e.g., `<div></div>`.

### uib-popover-* settings

All these settings are available for the three types of popovers.

- `popover-animation` $ C (Default: `true`, Config: `animation`) - Should it fade in and out?

- `popover-append-to-body` $ C (Default: `false`, Config: `appendToBody`) - Should the popover be appended to '$body' instead of the parent element?

- `popover-class` - Custom class to be applied to the popover.

- `popover-enable` $ (Default: `true`) - Is it enabled? It will enable or disable the configured popover-trigger.

- `popover-is-open` (Default: `false`) - Whether to show the popover.

- `popover-placement` C (Default: `top`, Config: `placement`) - Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popover will attempt to position where it fits in the closest scrollable ancestor. Accepts:

  - `top` - popover on top, horizontally centered on host element.
  - `top-left` - popover on top, left edge aligned with host element left edge.
  - `top-right` - popover on top, right edge aligned with host element right edge.
  - `bottom` - popover on bottom, horizontally centered on host element.
  - `bottom-left` - popover on bottom, left edge aligned with host element left edge.
  - `bottom-right` - popover on bottom, right edge aligned with host element right edge.
  - `left` - popover on left, vertically centered on host element.
  - `left-top` - popover on left, top edge aligned with host element top edge.
  - `left-bottom` - popover on left, bottom edge aligned with host element bottom edge.
  - `right` - popover on right, vertically centered on host element.
  - `right-top` - popover on right, top edge aligned with host element top edge.
  - `right-bottom` - popover on right, bottom edge aligned with host element bottom edge.

- `popover-popup-close-delay` C (Default: `0`, Config: `popupCloseDelay`) - For how long should the popover remain open after the close trigger event?

- `popover-popup-delay` C (Default: `0`, Config: `popupDelay`) - Popup delay in milliseconds until it opens.

- `popover-title` - A string to display as a fancy title.

- `popover-trigger` $ (Default: `'click'`) - What should trigger a show of the popover? Supports a space separated list of event names, or objects (see below).

Note: To configure the tooltips, you need to do it on `$uibTooltipProvider` (also see below).

### Triggers

The following show triggers are supported out of the box, along with their provided hide triggers:

- `mouseenter`: `mouseleave`
- `click`: `click`
- `outsideClick`: `outsideClick`
- `focus`: `blur`
- `none`

The `outsideClick` trigger will cause the popover to toggle on click, and hide when anything else is clicked.

For any non-supported value, the trigger will be used to both show and hide the popover. Using the 'none' trigger will disable the internal trigger(s), one can then use the `popover-is-open` attribute exclusively to show and hide the popover.

### $uibTooltipProvider

Through the `$uibTooltipProvider`, you can change the way tooltips and popovers behave by default; the attributes above always take precedence. The following methods are available:

- `setTriggers(obj)` (Example: `{ 'openTrigger': 'closeTrigger' }`) - Extends the default trigger mappings mentioned above with mappings of your own.

- `options(obj)` - Provide a set of defaults for certain tooltip and popover attributes. Currently supports the ones with the C badge.

### Known issues

For Safari 7+ support, if you want to use focus `popover-trigger`, you need to use an anchor tag with a tab index. For example:

    <a tabindex="0" uib-popover="Test" popover-trigger="focus" class="btn btn-secondary">
      Click Me
    </a>

    <div ng-controller="PopoverDemoCtrl">
        <h4>Dynamic</h4>
        <div class="form-group">
          <label>Popup Text:</label>
          <input type="text" ng-model="dynamicPopover.content" class="form-control">
        </div>
        <div class="form-group">
          <label>Popup Title:</label>
          <input type="text" ng-model="dynamicPopover.title" class="form-control">
        </div>
        <div class="form-group">
          <label>Popup Template:</label>
          <input type="text" ng-model="dynamicPopover.templateUrl" class="form-control">
        </div>
        <button uib-popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-secondary">Dynamic Popover</button>

        <button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-secondary">Popover With Template</button>

        <script type="text/ng-template" id="myPopoverTemplate.html">
            <div>{{dynamicPopover.content}}</div>
            <div class="form-group">
              <label>Popup Title:</label>
              <input type="text" ng-model="dynamicPopover.title" class="form-control">
            </div>
        </script>
        <hr />
        <h4>Positional</h4>
        <div class="form-group">
          <label>Popover placement</label>
          <select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
        </div>
        <button popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}" type="button" class="btn btn-secondary">Popover {{placement.selected}}</button>

        <hr />
        <h4>Triggers</h4>
        <p>
          <button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" type="button" class="btn btn-secondary">Mouseenter</button>
        </p>
        <input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..."  popover-trigger="'focus'" class="form-control">

        <hr />
        <h4>Other</h4>
        <button popover-animation="true" uib-popover="I fade in and out!" type="button" class="btn btn-secondary">fading</button>
        <button uib-popover="I have a title!" popover-title="The title." type="button" class="btn btn-secondary">title</button>
        <button uib-popover="I am activated manually" popover-is-open="popoverIsOpen" ng-click="popoverIsOpen = !popoverIsOpen" type="button" class="btn btn-secondary">Toggle popover</button>
        <button uib-popover-html="htmlPopover" class="btn btn-secondary">HTML Popover</button>
        <button uib-popover-html="'<b>HTML</b>, <i>inline</i>'" class="btn btn-secondary">HTML Popover (inline)</button>
    </div>

    angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
      $scope.dynamicPopover = {
        content: 'Hello, World!',
        templateUrl: 'myPopoverTemplate.html',
        title: 'Title'
      };

      $scope.placement = {
        options: [
          'top',
          'top-left',
          'top-right',
          'bottom',
          'bottom-left',
          'bottom-right',
          'left',
          'left-top',
          'left-bottom',
          'right',
          'right-top',
          'right-bottom'
        ],
        selected: 'top'
      };

      $scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">I can</b> have <div class="label label-success">HTML</div> content');
    });

# Position (ui.bootstrap.position)

#### $uibPosition service

Parent scrollable
Parent relative
Demo element
offsetParent: {{elemVals.offsetParent}}
scrollParent: {{elemVals.scrollParent}}
scrollbarWidth: {{scrollbarWidth}}
position: {{elemVals.position}}
offset: {{elemVals.offset}}
viewportOffset: {{elemVals.viewportOffset}}
positionElements: {{elemVals.positionElements}}

The `$uibPosition` service provides a set of DOM utilities used internally to absolute-position an element in relation to another element (tooltips, popovers, typeaheads etc...).

#### getRawNode(element)

Takes a jQuery/jqLite element and converts it to a raw DOM element.

##### parameters

- `element` (Type: `object`) - The element to convert.

##### returns

- (Type: `element`) - A raw DOM element.

#### parseStyle(element)

Parses a numeric style value to a number. Strips units and will return 0 for invalid (NaN) numbers.

##### parameters

- `value` (Type: `string`) - The style value to parse.

##### returns

- (Type: `number`) - The numeric value of the style property.

#### offsetParent(element)

Gets the closest positioned ancestor.

##### parameters

- `element` (Type: `element`) - The element to get the offset parent for.

##### returns

- (Type: `element`) - The closest positioned ancestor.

#### scrollbarWidth(isBody)

Calculates the browser scrollbar width and caches the result for future calls. Concept from the TWBS measureScrollbar() function in modal.js.

##### parameters

- `isBody` (Type: `boolean`, Default: `false`, optional) - Is the requested scrollbar width for the body/html element. IE and Edge overlay the scrollbar on the body/html element and should be considered 0.

##### returns

- (Type: `number`) - The width of the browser scrollbar.

#### scrollbarPadding(element)

Calculates the padding required to replace the scrollbar on an element.

##### parameters

- 'element' (Type: `element`) - The element to calculate the padding on (should be a scrollable element).

##### returns

An object with the following properties:

- `scrollbarWidth` (Type: `number`) - The width of the scrollbar.

- `widthOverflow` (Type: `boolean`) - Whether the width is overflowing.

- `right` (Type: `number`) - The total right padding required to replace the scrollbar.

- `originalRight` (Type: `number`) - The oringal right padding on the element.

- `heightOverflow` (Type: `boolean`) - Whether the height is overflowing.

- `bottom` (Type: `number`) - The total bottom padding required to replace the scrollbar.

- `originalBottom` (Type: `number`) - The oringal bottom padding on the element.

#### isScrollable(element, includeHidden)

Determines if an element is scrollable.

##### parameters

- `element` (Type: `element`) - The element to check.

- `includeHidden` (Type: `boolean`, Default: `false`, optional) - Should scroll style of 'hidden' be considered.

##### returns

- (Type: `boolean`) - Whether the element is scrollable.

#### scrollParent(element, includeHidden, includeSelf)

Gets the closest scrollable ancestor. Concept from the jQueryUI scrollParent.js.

##### parameters

- `element` (Type: `element`) - The element to get the closest scrollable ancestor for.

- `includeHidden` (Type: `boolean`, Default: `false`, optional) - Should scroll style of 'hidden' be considered.

- `includeSelf` (Type: `boolean`, Default: `false`, optional) - Should the element passed in be included in the scrollable lookup.

##### returns

- (Type: `element`) - The closest scrollable ancestor.

#### position(element, includeMargins)

A read-only equivalent of jQuery's position function, distance to closest positioned ancestor. Does not account for margins by default like jQuery's position.

##### parameters

- `element` (Type: `element`) - The element to get the position for.

- `includeMargins` (Type: `boolean`, Default: `false`, optional) - Should margins be accounted for.

##### returns

An object with the following properties:

- `width` (Type: `number`) - The width of the element.

- `height` (Type: `number`) - The height of the element.

- `top` (Type: `number`) - Distance to top edge of offset parent.

- `left` (Type: `number`) - Distance to left edge of offset parent.

#### offset(element)

A read-only equivalent of jQuery's offset function, distance to viewport.

##### parameters

- `element` (Type: `element`) - The element to get the offset for.

##### returns

An object with the following properties:

- `width` (Type: `number`) - The width of the element.

- `height` (Type: `number`) - The height of the element.

- `top` (Type: `number`) - Distance to top edge of the viewport.

- `left` (Type: `number`) - Distance to left edge of the viewport.

#### viewportOffset(element, useDocument, includePadding)

Gets the elements available space relative to the closest scrollable ancestor. Accounts for padding, border, and scrollbar width. Right and bottom dimensions represent the distance to the respective edge of the viewport element, not the top and left edge. If the element edge extends beyond the viewport, a negative value will be reported.

##### parameters

- `element` (Type: `element`) - The element to get the viewport offset for.

- `useDocument` (Type: `boolean`, Default: `false`, optional) - Should the viewport be the document element instead of the first scrollable element.

- `includePadding` (Type: `boolean`, Default: `true`, optional) - Should the padding on the viewport element be accounted for, default is true.

##### returns

An object with the following properties:

- `top` (Type: `number`) - Distance to top content edge of the viewport.

- `bottom` (Type: `number`) - Distance to bottom content edge of the viewport.

- `left` (Type: `number`) - Distance to left content edge of the viewport.

- `right` (Type: `number`) - Distance to right content edge of the viewport.

#### parsePlacement(placement)

Gets an array of placement values parsed from a placement string. Along with the 'auto' indicator, supported placement strings are:

- top: element on top, horizontally centered on host element.
- top-left: element on top, left edge aligned with host element left edge.
- top-right: element on top, right edge aligned with host element right edge.
- bottom: element on bottom, horizontally centered on host element.
- bottom-left: element on bottom, left edge aligned with host element left edge.
- bottom-right: element on bottom, right edge aligned with host element right edge.
- left: element on left, vertically centered on host element.
- left-top: element on left, top edge aligned with host element top edge.
- left-bottom: element on left, bottom edge aligned with host element bottom edge.
- right: element on right, vertically centered on host element.
- right-top: element on right, top edge aligned with host element top edge.
- right-bottom: element on right, bottom edge aligned with host element bottom edge.

A placement string with an 'auto' indicator is expected to be space separated from the placement, i.e: 'auto bottom-left'. If the primary and secondary placement values do not match 'top, bottom, left, right' then 'top' will be the primary placement and 'center' will be the secondary placement. If 'auto' is passed, true will be returned as the 3rd value of the array.

##### parameters

- `placement` (Type: `string`, Example: `auto top-left`) - The placement string to parse.

##### returns

An array with the following values:

- `[0]` (Type: `string`) - The primary placement.

- `[1]` (Type: `string`) - The secondary placement.

- `[2]` (Type: `boolean`) - Is auto place enabled.

#### positionElements(hostElement, targetElement, placement, appendToBody)

Gets gets coordinates for an element to be positioned relative to another element.

##### parameters

- `hostElement` (Type: `element`) - The element to position against.

- `targetElement` (Type: `element`) - The element to position.

- `placement` (Type: `string`, Default: `top`, optional) - The placement for the target element. See the parsePlacement() function for available options. If 'auto' placement is used, the viewportOffset() function is used to decide where the targetElement will fit.

- `appendToBody` (Type: `boolean`, Default: `false`, optional) - Should the coordinates be cacluated from the body element.

##### returns

An object with the following properties:

- `top` (Type: `number`) - The targetElement top value.

- `left` (Type: `number`) - The targetElement left value.

- `right` (Type: `number`) - The resolved placement with 'auto' removed.

#### positionArrow(element, placement)

Positions the tooltip and popover arrow elements when using placement options beyond the standard top, left, bottom, or right.

##### parameters

- `element` (Type: `element`) - The element to position the arrow element for.

- `placement` (Type: `string`) - The placement for the element.

    <div ng-controller="PositionDemoCtrl">
      <h4>$uibPosition service</h4>
      <div id="posdemoparent" ng-style="{'overflow': (parentScrollable && 'scroll'), 'position': (parentRelative && 'relative')}" style="border: 1px solid #ccc; padding: 15px;">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="parentScrollable"> Parent scrollable
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="parentRelative"> Parent relative
          </label>
        </div>
        <button id="posdemobtn" class="btn btn-secondary" ng-click="getValues()">Get values</button>

        <div id="posdemodiv" style="width: 100px; height: 100px; margin: 15px 0; padding: 10px; background-color: #f8f8f8; border: 1px solid #ccc;">
          Demo element
        </div>
      </div>
      <br />
      offsetParent: {{elemVals.offsetParent}}
      <br />
      scrollParent: {{elemVals.scrollParent}}
      <br />
      scrollbarWidth: {{scrollbarWidth}}
      <br />
      position: {{elemVals.position}}
      <br />
      offset: {{elemVals.offset}}
      <br />
      viewportOffset: {{elemVals.viewportOffset}}
      <br />
      positionElements: {{elemVals.positionElements}}
    </div>

    angular.module('ui.bootstrap.demo').controller('PositionDemoCtrl', function ($scope, $window, $uibPosition) {

        $scope.elemVals = {};
        $scope.parentScrollable = true;
        $scope.parentRelative = true;

        $scope.getValues = function() {
          var divEl = $window.document.querySelector('#posdemodiv');
          var btnEl = $window.document.querySelector('#posdemobtn');

          var offsetParent = $uibPosition.offsetParent(divEl);
          $scope.elemVals.offsetParent = 'type: ' + offsetParent.tagName + ', id: ' + offsetParent.id;

          var scrollParent = $uibPosition.scrollParent(divEl);
          $scope.elemVals.scrollParent = 'type: ' + scrollParent.tagName + ', id: ' + scrollParent.id;

          $scope.scrollbarWidth = $uibPosition.scrollbarWidth();

          $scope.elemVals.position = $uibPosition.position(divEl);

          $scope.elemVals.offset = $uibPosition.offset(divEl);

          $scope.elemVals.viewportOffset = $uibPosition.viewportOffset(divEl);

          $scope.elemVals.positionElements = $uibPosition.positionElements(btnEl, divEl, 'auto bottom-left');
        };
    });

# Progressbar (ui.bootstrap.progressbar)

### Static

22%
166 / 200

### Dynamic

{{dynamic}} / {{max}} No animation {{dynamic}}% Object (changes type based on value) {{type}} !!! Watch out !!!

### Stacked

{{bar.value}}%

A progress bar directive that is focused on providing feedback on the progress of a workflow or action.

It supports multiple (stacked) `<uib-bar>` into the same `<uib-progress>` element or a single `<uib-progressbar>` element with optional `max` attribute and transition animations.

### uib-progressbar settings

- `value` $ - The current value of progress completed.

- `type` (Default: `null`) - Bootstrap style type. Possible values are 'success', 'info', 'warning', and, 'danger' to use Bootstrap's pre-existing styling, or any desired custom suffix.

- `max` $ C (Default: `100`) - A number that specifies the total value of bars that is required.

- `animate` $ C (Default: `true`) - Whether bars use transitions to achieve the width change.

- `title` (Default: `progressbar`) - Title to use as label (for accessibility).

- `striped` $ C (Default: `false`)

### uib-progress settings

- `max` $ C (Default: `100`) - A number that specifies the total value of bars that is required.

- `animate` $ C (Default: `true`) - Whether bars use transitions to achieve the width change.

- `title` (Default: `progressbar`) - Title to use as label (for accessibility).

### uib-bar settings

- `value` $ - The current value of progress completed.

- `type` (Default: `null`) - Bootstrap style type. Possible values are 'success', 'info', 'warning', and, 'danger' to use Bootstrap's pre-existing styling, or any desired custom suffix.

- `title` (Default: `progressbar`) - Title to use as label (for accessibility).

- `striped` $ C (Default: `false`)

    <div ng-controller="ProgressDemoCtrl">

        <h3>Static</h3>
        <div class="row">
            <div class="col-sm-4"><uib-progressbar value="55"></uib-progressbar></div>
            <div class="col-sm-4"><uib-progressbar value="22" type="warning" striped="true">22%</uib-progressbar></div>
            <div class="col-sm-4"><uib-progressbar class="active" max="200" value="166" type="danger" striped="true"><i>166 / 200</i></uib-progressbar></div>
        </div>

        <hr />
        <h3>Dynamic <button type="button" class="btn btn-sm btn-primary" ng-click="random()">Randomize</button></h3>
        <uib-progressbar max="max" value="dynamic"><span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span></uib-progressbar>

        <small><em>No animation</em></small>
        <uib-progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></uib-progressbar>

        <small><em>Object (changes type based on value)</em></small>
        <uib-progressbar class="active" value="dynamic" type="{{type}}" striped="true">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></uib-progressbar>

        <hr />
        <h3>Stacked <button type="button" class="btn btn-sm btn-primary" ng-click="randomStacked()">Randomize</button></h3>
        <uib-progress><uib-bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></uib-bar></uib-progress>

    </div>

    angular.module('ui.bootstrap.demo').controller('ProgressDemoCtrl', function ($scope) {
      $scope.max = 200;

      $scope.random = function() {
        var value = Math.floor(Math.random() * 100 + 1);
        var type;

        if (value < 25) {
          type = 'success';
        } else if (value < 50) {
          type = 'info';
        } else if (value < 75) {
          type = 'warning';
        } else {
          type = 'danger';
        }

        $scope.showWarning = type === 'danger' || type === 'warning';

        $scope.dynamic = value;
        $scope.type = type;
      };

      $scope.random();

      $scope.randomStacked = function() {
        $scope.stacked = [];
        var types = ['success', 'info', 'warning', 'danger'];

        for (var i = 0, n = Math.floor(Math.random() * 4 + 1); i < n; i++) {
            var index = Math.floor(Math.random() * 4);
            $scope.stacked.push({
              value: Math.floor(Math.random() * 30 + 1),
              type: types[index]
            });
        }
      };

      $scope.randomStacked();
    });

# Rating (ui.bootstrap.rating)

#### Default

{{percent}}%

    Rate: {{rate}} - Readonly is: {{isReadonly}} - Hovering over: {{overStar || "none"}}

#### Custom icons

(Rate: {{x}})
(Rate: {{y}})

Rating directive that will take care of visualising a star rating bar.

### uib-rating settings

- `max` $ C (Default: `5`) - Changes the number of icons.

- `ng-model` $ - The current rate.

- `on-hover(value)` $ - An optional expression called when user's mouse is over a particular icon.

- `on-leave()` $ - An optional expression called when user's mouse leaves the control altogether.

- `rating-states` $ (Default: `null`) - An array of objects defining properties for all icons. In default template, `stateOn` & `stateOff` property is used to specify the icon's class.

- `read-only` $ (Default: `false`) - Prevent user's interaction.

- `titles` $ C (Default: ['one', 'two', 'three', 'four', 'five']`) - An array of strings defining titles for all icons.

- `enable-reset` $ (Default: `true`) - Clicking the icon of the current rating will reset the rating to 0.

- `state-off` $ C (Default: `null`) - A variable used in the template to specify the state for unselected icons.

- `state-on` $ C (Default: `null`) - A variable used in the template to specify the state (class, src, etc) for selected icons.

    <div ng-controller="RatingDemoCtrl">
        <h4>Default</h4>
        <span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></span>
        <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>

        <pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>

        <button type="button" class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>
        <button type="button" class="btn btn-sm btn-secondary" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button>
        <hr />

        <h4>Custom icons</h4>
        <div ng-init="x = 5"><span uib-rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></span> <b>(<i>Rate:</i> {{x}})</b></div>
        <div ng-init="y = 2"><span uib-rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></span> <b>(<i>Rate:</i> {{y}})</b></div>
    </div>

    angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) {
      $scope.rate = 7;
      $scope.max = 10;
      $scope.isReadonly = false;

      $scope.hoveringOver = function(value) {
        $scope.overStar = value;
        $scope.percent = 100 * (value / $scope.max);
      };

      $scope.ratingStates = [
        {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
        {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
        {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
        {stateOn: 'glyphicon-heart'},
        {stateOff: 'glyphicon-off'}
      ];
    });

# Tabs (ui.bootstrap.tabs)

Select a tab by setting active binding to true:

Static content {{tab.content}}
Alert! I've got an HTML heading, and a select callback. Pretty cool!

Vertical content 1 Vertical content 2

Justified content Short Labeled Justified content Long Labeled Justified content

Tabbed pills with CSS classes Tab 1 content Tab 2 content

Tabs using nested forms:
Name
Some Tab Content More Tab Content Model:

    {{ model | json }}

Nested Form:

    {{ outerForm.nestedForm | json }}

AngularJS version of the tabs directive.

### uib-tabset settings

- `active` (Default: `Index of first tab`) - Active index of tab. Setting this to an existing tab index will make that tab active.

- `justified` $ (Default: `false`) - Whether tabs fill the container and have a consistent width.

  - `template-url` (Default: `uib/template/tabs/tabset.html`) - A URL representing the location of a template to use for the main component.

- `type` (Defaults: `tabs`) - Navigation type. Possible values are 'tabs' and 'pills'.

- `vertical` $ (Default: `false`) - Whether tabs appear vertically stacked.

### uib-tab settings

- `classes` $ - An optional string of space-separated CSS classes.

- `deselect()` $ - An optional expression called when tab is deactivated. Supports `$event` and `$selectedIndex` in template for expression. You may call `$event.preventDefault()` in this event handler to prevent a tab change from occurring. The `$selectedIndex` can be used to determine which tab was attempted to be opened.

- `disable` $ (Default: `false`) - Whether tab is clickable and can be activated.

- `heading` - Heading text.

- `index` - Tab index. Must be unique number or string.

- `select()` $ - An optional expression called when tab is activated. Supports $event in template for expression.

- `template-url` (Default: `uib/template/tabs/tab.html`) - A URL representing the location of a template to use for the tab heading.

### Tabset heading

Instead of the `heading` attribute on the `uib-tabset`, you can use an `uib-tab-heading` element inside a tabset that will be used as the tabset's header. There you can use HTML as well.

### Known issues

To use clickable elements within the tab, you have override the tab template to use div elements instead of anchor elements, and replicate the desired styles from Bootstrap's CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.

    <style type="text/css">
      form.tab-form-demo .tab-pane {
        margin: 20px 20px;
      }
    </style>

    <div ng-controller="TabsDemoCtrl">
      <p>Select a tab by setting active binding to true:</p>
      <p>
        <button type="button" class="btn btn-secondary btn-sm" ng-click="active = 1">Select second tab</button>
        <button type="button" class="btn btn-secondary btn-sm" ng-click="active = 2">Select third tab</button>
      </p>
      <p>
        <button type="button" class="btn btn-secondary btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
      </p>
      <hr />

      <uib-tabset active="active">
        <uib-tab index="0" heading="Static title">Static content</uib-tab>
        <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
          {{tab.content}}
        </uib-tab>
        <uib-tab index="3" select="alertMe()">
          <uib-tab-heading>
            <i class="fa-svg-icon">
              <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M912 1696q0-16-16-16-59 0-101.5-42.5t-42.5-101.5q0-16-16-16t-16 16q0 73 51.5 124.5t124.5 51.5q16 0 16-16zm816-288q0 52-38 90t-90 38h-448q0 106-75 181t-181 75-181-75-75-181h-448q-52 0-90-38t-38-90q50-42 91-88t85-119.5 74.5-158.5 50-206 19.5-260q0-152 117-282.5t307-158.5q-8-19-8-39 0-40 28-68t68-28 68 28 28 68q0 20-8 39 190 28 307 158.5t117 282.5q0 139 19.5 260t50 206 74.5 158.5 85 119.5 91 88z"/></svg>
            </i>
            Alert!
          </uib-tab-heading>
          I've got an HTML heading, and a select callback. Pretty cool!
        </uib-tab>
      </uib-tabset>

      <hr />

      <uib-tabset active="activePill" vertical="true" type="pills">
        <uib-tab index="0" heading="Vertical 1">Vertical content 1</uib-tab>
        <uib-tab index="1" heading="Vertical 2">Vertical content 2</uib-tab>
      </uib-tabset>

      <hr />

      <uib-tabset active="activeJustified" justified="true">
        <uib-tab index="0" heading="Justified">Justified content</uib-tab>
        <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
        <uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>
      </uib-tabset>

      <hr />

      Tabbed pills with CSS classes
      <uib-tabset type="pills">
        <uib-tab heading="Default Size">Tab 1 content</uib-tab>
        <uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>
      </uib-tabset>

      <hr />

      Tabs using nested forms:
      <form name="outerForm" class="tab-form-demo">
        <uib-tabset active="activeForm">
          <uib-tab index="0" heading="Form Tab">
            <ng-form name="nestedForm">
              <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" required ng-model="model.name"/>
              </div>
            </ng-form>
          </uib-tab>
          <uib-tab index="1" heading="Tab One">
            Some Tab Content
          </uib-tab>
          <uib-tab index="2" heading="Tab Two">
            More Tab Content
          </uib-tab>
        </uib-tabset>
      </form>
      Model:
      <pre>{{ model | json }}</pre>
      Nested Form:
      <pre>{{ outerForm.nestedForm | json }}</pre>
    </div>

    angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
      $scope.tabs = [
        { title:'Dynamic Title 1', content:'Dynamic content 1' },
        { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
      ];

      $scope.alertMe = function() {
        setTimeout(function() {
          $window.alert('You\'ve selected the alert tab!');
        });
      };

      $scope.model = {
        name: 'Tabs'
      };
    });

# Timepicker (ui.bootstrap.timepicker)

    Time is: {{mytime | date:'shortTime' }}

Hours step is:
Minutes step is:

A lightweight & configurable timepicker directive.

### uib-timepicker settings

- `arrowkeys` $ C (Default: `true`) - Whether user can use up/down arrow keys inside the hours & minutes input to increase or decrease its values.

- `hour-step` $ C (Default: `1`) - Number of hours to increase or decrease when using a button.

- `max` $ (Default: `undefined`) - Maximum time a user can select.

- `meridians` $ C (Default: `null`) - Meridian labels based on locale. To override you must supply an array like `['AM', 'PM']`.

- `min` $ (Default: `undefined`) - Minimum time a user can select

- `minute-step` $ C (Default: `1`) - Number of minutes to increase or decrease when using a button.

- `mousewheel` $ C (Default: `true`) - Whether user can scroll inside the hours & minutes input to increase or decrease its values.

- `ng-disabled` $ (Default: `false`) - Whether or not to disable the component.

- `ng-model` $ - Date object that provides the time state.

- `pad-hours` $ (Default: true) - Whether the hours column is padded with a 0.

- `readonly-input` $ C (Default: `false`) - Whether user can type inside the hours & minutes input.

- `second-step` $ C (Default: `1`) - Number of seconds to increase or decrease when using a button.

- `show-meridian` $ C (Default: `true`) - Whether to display 12H or 24H mode.

- `show-seconds` $ C (Default: `false`) - Show seconds input.

- `show-spinners` $ C (Default: `true`) - Show spinner arrows above and below the inputs.

- `tabindex` (Defaults: `0`) - Sets tabindex for each control in the timepicker.

- `template-url` C (Defaults: `uib/template/timepicker/timepicker.html`) - Add the ability to override the template used on the component.

Notes

This component makes no claims of absolutely supporting the preservation of dates in all cases, and it is highly recommended that model tracking of dates is encapsulated in a different object. This component should not be used with the same model as the datepicker. This is due to edge cases with situations such as Daylight Savings timezone changes which require a modification of the date in order to prevent an impossible to increment or decrement situation. See #5485 for details.

If the model value is updated (i.e. via `Date.prototype.setDate`), you must update the model value by breaking the reference by `modelValue = new Date(modelValue)` in order to have the timepicker update.

    <div ng-controller="TimepickerDemoCtrl">

      <div uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></div>

      <pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>

      <div class="row">
        <div class="col-xs-6">
            Hours step is:
          <select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
        </div>
        <div class="col-xs-6">
            Minutes step is:
          <select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
        </div>
      </div>

      <hr>

      <button type="button" class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
      <button type="button" class="btn btn-secondary" ng-click="update()">Set to 14:00</button>
      <button type="button" class="btn btn-danger" ng-click="clear()">Clear</button>

    </div>

    angular.module('ui.bootstrap.demo').controller('TimepickerDemoCtrl', function ($scope, $log) {
      $scope.mytime = new Date();

      $scope.hstep = 1;
      $scope.mstep = 15;

      $scope.options = {
        hstep: [1, 2, 3],
        mstep: [1, 5, 10, 15, 25, 30]
      };

      $scope.ismeridian = true;
      $scope.toggleMode = function() {
        $scope.ismeridian = ! $scope.ismeridian;
      };

      $scope.update = function() {
        var d = new Date();
        d.setHours( 14 );
        d.setMinutes( 0 );
        $scope.mytime = d;
      };

      $scope.changed = function () {
        $log.log('Time changed to: ' + $scope.mytime);
      };

      $scope.clear = function() {
        $scope.mytime = null;
      };
    });

# Tooltip (ui.bootstrap.tooltip)

Tooltip placement

Dynamic Tooltip Text
Dynamic Tooltip Popup Text

Pellentesque {{dynamicTooltipText}}, sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in aliquam. Tincidunt lobortis feugiat vivamus at fading eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur show delay nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas hide delay pharetra convallis posuere morbi leo urna, Custom template at elementum eu, facilisis sed odio morbi quis commodo odio.

I can even contain HTML as a scope variable or inline string

I can have a custom class. Check me out!

Or use custom triggers, like focus:
Disable tooltips conditionally:
Open tooltips conditionally.

A lightweight, extensible directive for fancy tooltip creation. The tooltip directive supports multiple placements, optional transition animation, and more.

Note to mobile developers: Please note that while tooltips may work correctly on mobile devices (including tablets), we have made the decision to not officially support such a use-case because it does not make sense from a UX perspective.

There are three versions of the tooltip: `uib-tooltip`, `uib-tooltip-template`, and `uib-tooltip-html`:

- `uib-tooltip` - Takes text only and will escape any HTML provided.
- `uib-tooltip-html` $ - Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the `uib-tooltip-template` attribute option instead. The user is responsible for ensuring the content is safe to put into the DOM!
- `uib-tooltip-template` $ - Takes text that specifies the location of a template to use for the tooltip. Note that this needs to be wrapped in a tag.

### uib-tooltip-* settings

All these settings are available for the three types of tooltips.

- `tooltip-animation` $ C (Default: `true`, Config: `animation`) - Should it fade in and out?

- `tooltip-append-to-body` $ C (Default: `false`, Config: `appendToBody`) - Should the tooltip be appended to '$body' instead of the parent element?

- `tooltip-class` - Custom class to be applied to the tooltip.

- `tooltip-enable` $ (Default: `true`) - Is it enabled? It will enable or disable the configured tooltip-trigger.

- `tooltip-is-open` (Default: `false`) - Whether to show the tooltip.

- `tooltip-placement` C (Default: `top`, Config: `placement`) - Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The tooltip will attempt to position where it fits in the closest scrollable ancestor. Accepts:

  - `top` - tooltip on top, horizontally centered on host element.
  - `top-left` - tooltip on top, left edge aligned with host element left edge.
  - `top-right` - tooltip on top, right edge aligned with host element right edge.
  - `bottom` - tooltip on bottom, horizontally centered on host element.
  - `bottom-left` - tooltip on bottom, left edge aligned with host element left edge.
  - `bottom-right` - tooltip on bottom, right edge aligned with host element right edge.
  - `left` - tooltip on left, vertically centered on host element.
  - `left-top` - tooltip on left, top edge aligned with host element top edge.
  - `left-bottom` - tooltip on left, bottom edge aligned with host element bottom edge.
  - `right` - tooltip on right, vertically centered on host element.
  - `right-top` - tooltip on right, top edge aligned with host element top edge.
  - `right-bottom` - tooltip on right, bottom edge aligned with host element bottom edge.

- `tooltip-popup-close-delay` C (Default: `0`, Config: `popupCloseDelay`) - For how long should the tooltip remain open after the close trigger event?

- `tooltip-popup-delay` C (Default: `0`, Config: `popupDelay`) - Popup delay in milliseconds until it opens.

- `tooltip-trigger` $ (Default: `'mouseenter'`) - What should trigger a show of the tooltip? Supports a space separated list of event names, or objects (see below).

Note: To configure the tooltips, you need to do it on `$uibTooltipProvider` (also see below).

### Triggers

The following show triggers are supported out of the box, along with their provided hide triggers:

- `mouseenter`: `mouseleave`
- `click`: `click`
- `outsideClick`: `outsideClick`
- `focus`: `blur`
- `none`

The `outsideClick` trigger will cause the tooltip to toggle on click, and hide when anything else is clicked.

For any non-supported value, the trigger will be used to both show and hide the tooltip. Using the 'none' trigger will disable the internal trigger(s), one can then use the `tooltip-is-open` attribute exclusively to show and hide the tooltip.

### $uibTooltipProvider

Through the `$uibTooltipProvider`, you can change the way tooltips and popovers behave by default; the attributes above always take precedence. The following methods are available:

- `setTriggers(obj)` (Example: `{ 'openTrigger': 'closeTrigger' }`) - Extends the default trigger mappings mentioned above with mappings of your own.

- `options(obj)` - Provide a set of defaults for certain tooltip and popover attributes. Currently supports the ones with the C badge.

### Known issues

For Safari 7+ support, if you want to use the focus `tooltip-trigger`, you need to use an anchor tag with a tab index. For example:

    <a tabindex="0" uib-tooltip="Test" tooltip-trigger="focus" class="btn btn-secondary">
      Click Me
    </a>

For Safari (potentially all versions up to 9), there is an issue with the hover CSS selector when using multiple elements grouped close to each other that are using the tooltip - it is possible for multiple elements to gain the hover state when mousing between the elements quickly and exiting the container at the right time. See issue #5445 for more details.

    <div ng-controller="TooltipDemoCtrl">
        <div class="form-group">
          <label>Tooltip placement</label>
          <select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
        </div>
        <button tooltip-placement="{{placement.selected}}" uib-tooltip="On the {{placement.selected}}" type="button" class="btn btn-secondary">Tooltip {{placement.selected}}</button>

        <hr />
        <div class="form-group">
          <label>Dynamic Tooltip Text</label>
          <input type="text" ng-model="dynamicTooltipText" class="form-control">
        </div>
        <div class="form-group">
          <label>Dynamic Tooltip Popup Text</label>
          <input type="text" ng-model="dynamicTooltip" class="form-control">
        </div>
        <p>
          Pellentesque <a href="#" uib-tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
          sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
          aliquam. Tincidunt lobortis feugiat vivamus at
          <a href="#" tooltip-animation="false" uib-tooltip="I don't fade. :-(">fading</a>
          eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
          <a href="#" tooltip-popup-delay='1000' uib-tooltip='appears with delay'>show delay</a>
          nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
          <a href="#" tooltip-popup-close-delay='1000' uib-tooltip='hides with delay'>hide delay</a>
          pharetra convallis posuere morbi leo urna,
          <a href="#" uib-tooltip-template="'myTooltipTemplate.html'">Custom template</a>
          at elementum eu, facilisis sed odio morbi quis commodo odio.
        </p>

        <p>
            I can even contain HTML as a
            <a href="#" uib-tooltip-html="htmlTooltip">scope variable</a> or
            <a href="#" uib-tooltip-html="'static. {{dynamicTooltipText}}. <b>bold.</b>'">inline string</a>
        </p>

        <p>
          <style>
            /* Specify styling for tooltip contents */
            .tooltip.customClass .tooltip-inner {
              color: #880000;
              background-color: #ffff66;
              box-shadow: 0 6px 12px rgba(0,0,0,.175);
            }
            /* Hide arrow */
            .tooltip.customClass .tooltip-arrow {
              display: none;
            }
          </style>
          I can have a custom class. <a href="#" uib-tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
        </p>

        <div class="form-group">
          <label>Or use custom triggers, like focus: </label>
          <input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="'focus'" tooltip-placement="right" class="form-control" />
        </div>

        <div class="form-group" ng-class="{'has-error' : !inputModel}">
          <label>Disable tooltips conditionally:</label>
          <input type="text" ng-model="inputModel" class="form-control"
                 placeholder="Hover over this for a tooltip until this is filled"
                 uib-tooltip="Enter something in this input field to disable this tooltip"
                 tooltip-placement="top"
                 tooltip-trigger="'mouseenter'"
                 tooltip-enable="!inputModel" />
        </div>
        <div class="form-group">
          <label>
            Open tooltips <span uib-tooltip="Hello!" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom">conditionally.</span>
          </label>
          <button ng-click="tooltipIsOpen = !tooltipIsOpen">Toggle tooltip</button>
        </div>
        <script type="text/ng-template" id="myTooltipTemplate.html">
          <span>Special Tooltip with <strong>markup</strong> and {{ dynamicTooltipText }}</span>
        </script>
    </div>

    angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope, $sce) {
      $scope.dynamicTooltip = 'Hello, World!';
      $scope.dynamicTooltipText = 'dynamic';
      $scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
      $scope.placement = {
        options: [
          'top',
          'top-left',
          'top-right',
          'bottom',
          'bottom-left',
          'bottom-right',
          'left',
          'left-top',
          'left-bottom',
          'right',
          'right-top',
          'right-bottom'
        ],
        selected: 'top'
      };
    });

# Typeahead (ui.bootstrap.typeahead)

#### Static arrays

    Model: {{selected | json}}

#### Asynchronous results

    Model: {{asyncSelected | json}}

No Results Found

#### ngModelOptions support

    Model: {{ngModelOptionsSelected | json}}

#### Custom templates for results

    Model: {{customSelected | json}}

#### Custom popup templates for typeahead's dropdown

    Model: {{customPopupSelected | json}}

Typeahead is a AngularJS version of Bootstrap v2's typeahead plugin. This directive can be used to quickly create elegant typeaheads with any form text input.

It is very well integrated into AngularJS as it uses a subset of the select directive syntax, which is very flexible. Supported expressions are:

- label for value in sourceArray
- select as label for value in sourceArray

The `sourceArray` expression can use a special `$viewValue` variable that corresponds to the value entered inside the input.

This directive works with promises, meaning you can retrieve matches using the `$http` service with minimal effort.

### uib-typeahead settings

- `ng-model` $ - Assignable angular expression to data-bind to.

- `ng-model-options` $ - Options for ng-model (see ng-model-options directive). Currently supports the `debounce` and `getterSetter` options.

- `typeahead-append-to` $ (Default: `null`) - Should the typeahead popup be appended to an element instead of the parent element?

- `typeahead-append-to-body` $ (Default: `false`) - Should the typeahead popup be appended to $body instead of the parent element?

- `typeahead-editable` $ (Default: `true`) - Should it restrict model values to the ones selected from the popup only?

- `typeahead-focus-first` $ (Default: `true`) - Should the first match automatically be focused as you type?

- `typeahead-focus-on-select` (Default: `true`) - On selection, focus the input element the typeahead directive is associated with.

- `typeahead-input-formatter` (Default: `undefined`) - Format the ng-model result after selection.

- `typeahead-is-open` $ (Default: `angular.noop`) - Binding to a variable that indicates if the dropdown is open.

- `typeahead-loading` $ (Default: `angular.noop`) - Binding to a variable that indicates if matches are being retrieved asynchronously.

- `typeahead-min-length` $ (Default: `1`) - Minimal no of characters that needs to be entered before typeahead kicks-in. Must be greater than or equal to 0.

- `typeahead-no-results` $ (Default: `angular.noop`) - Binding to a variable that indicates if no matching results were found.

- `typeahead-should-select($event)` $ (Default: `null`) - A callback executed when a `keyup` event that might trigger a selection occurs. Selection will only occur if this function returns true.

- `typeahead-on-select($item, $model, $label, $event)` $ (Default: `null`) - A callback executed when a match is selected. $event can be undefined if selection not triggered from a user event.

- `typeahead-popup-template-url` (Default: `uib/template/typeahead/typeahead-popup.html`) - Set custom popup template.

- `typeahead-select-on-blur` $ (Default: `false`) - On blur, select the currently highlighted match.

- `typeahead-select-on-exact` $ (Default: `false`) - Automatically select the item when it is the only one that exactly matches the user input.

- `typeahead-show-hint` $ (Default: `false`) - Show hint when the first option matches.

- `typeahead-template-url` (Default: `uib/template/typeahead/typeahead-match.html`) - Set custom item template.

- `typeahead-wait-ms` $ (Default: `0`) - Minimal wait time after last character typed before typeahead kicks-in.

- `uib-typeahead` $ - Comprehension Angular expression (see select directive).

Notes

If a custom template for the popup is used, the wrapper selector used for the match items is the `uib-typeahead-match` class.

    <style>
      .typeahead-demo .custom-popup-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        background-color: #f9f9f9;
      }

      .typeahead-demo .custom-popup-wrapper > .message {
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
        color: #868686;
      }

      .typeahead-demo .custom-popup-wrapper > .dropdown-menu {
        position: static;
        float: none;
        display: block;
        min-width: 160px;
        background-color: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
      }
    </style>

    <script type="text/ng-template" id="customTemplate.html">
      <a class="dropdown-item">
          <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
          <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
      </a>
    </script>

    <script type="text/ng-template" id="customPopupTemplate.html">
      <div class="custom-popup-wrapper"
         ng-style="{top: position().top+'px', left: position().left+'px'}"
         style="display: block;"
         ng-show="isOpen() && !moveInProgress"
         aria-hidden="{{!isOpen()}}">
        <p class="message">select location from drop down.</p>

        <ul class="dropdown-menu" role="listbox">
          <li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }"
            ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
            <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
          </li>
        </ul>
      </div>
    </script>

    <div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">

        <h4>Static arrays</h4>
        <pre>Model: {{selected | json}}</pre>
        <input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

        <h4>Asynchronous results</h4>
        <pre>Model: {{asyncSelected | json}}</pre>
        <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
        <i ng-show="loadingLocations" class="fa-svg-icon">
          <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1639 1056q0 5-1 7-64 268-268 434.5t-478 166.5q-146 0-282.5-55t-243.5-157l-129 129q-19 19-45 19t-45-19-19-45v-448q0-26 19-45t45-19h448q26 0 45 19t19 45-19 45l-137 137q71 66 161 102t187 36q134 0 250-65t186-179q11-17 53-117 8-23 30-23h192q13 0 22.5 9.5t9.5 22.5zm25-800v448q0 26-19 45t-45 19h-448q-26 0-45-19t-19-45 19-45l138-138q-148-137-349-137-134 0-250 65t-186 179q-11 17-53 117-8 23-30 23h-199q-13 0-22.5-9.5t-9.5-22.5v-7q65-268 270-434.5t480-166.5q146 0 284 55.5t245 156.5l130-129q19-19 45-19t45 19 19 45z"/></svg>
        </i>
        <div ng-show="noResults">
          <i class="fa-svg-icon">
            <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg>
          </i>
          No Results Found
        </div>

        <h4>ngModelOptions support</h4>
        <pre>Model: {{ngModelOptionsSelected | json}}</pre>
        <input type="text" ng-model="ngModelOptionsSelected" ng-model-options="modelOptions" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

        <h4>Custom templates for results</h4>
        <pre>Model: {{customSelected | json}}</pre>
        <input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0">

        <h4>Custom popup templates for typeahead's dropdown</h4>
        <pre>Model: {{customPopupSelected | json}}</pre>
        <input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">
    </div>

    angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {

      var _selected;

      $scope.selected = undefined;
      $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
      // Any function returning a promise object can be used to load values asynchronously
      $scope.getLocation = function(val) {
        return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
          params: {
            address: val,
            sensor: false
          }
        }).then(function(response){
          return response.data.results.map(function(item){
            return item.formatted_address;
          });
        });
      };

      $scope.ngModelOptionsSelected = function(value) {
        if (arguments.length) {
          _selected = value;
        } else {
          return _selected;
        }
      };

      $scope.modelOptions = {
        debounce: {
          default: 500,
          blur: 250
        },
        getterSetter: true
      };

      $scope.statesWithFlags = [{'name':'Alabama','flag':'5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'},{'name':'Alaska','flag':'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'},{'name':'Arizona','flag':'9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'},{'name':'Arkansas','flag':'9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png'},{'name':'California','flag':'0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png'},{'name':'Colorado','flag':'4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png'},{'name':'Connecticut','flag':'9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png'},{'name':'Delaware','flag':'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png'},{'name':'Florida','flag':'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png'},{'name':'Georgia','flag':'5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png'},{'name':'Hawaii','flag':'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png'},{'name':'Idaho','flag':'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png'},{'name':'Illinois','flag':'0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png'},{'name':'Indiana','flag':'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png'},{'name':'Iowa','flag':'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png'},{'name':'Kansas','flag':'d/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png'},{'name':'Kentucky','flag':'8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png'},{'name':'Louisiana','flag':'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png'},{'name':'Maine','flag':'3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png'},{'name':'Maryland','flag':'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png'},{'name':'Massachusetts','flag':'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png'},{'name':'Michigan','flag':'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png'},{'name':'Minnesota','flag':'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png'},{'name':'Mississippi','flag':'4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png'},{'name':'Missouri','flag':'5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png'},{'name':'Montana','flag':'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png'},{'name':'Nebraska','flag':'4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png'},{'name':'Nevada','flag':'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png'},{'name':'New Hampshire','flag':'2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png'},{'name':'New Jersey','flag':'9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png'},{'name':'New Mexico','flag':'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png'},{'name':'New York','flag':'1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png'},{'name':'North Carolina','flag':'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png'},{'name':'North Dakota','flag':'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png'},{'name':'Ohio','flag':'4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png'},{'name':'Oklahoma','flag':'6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png'},{'name':'Oregon','flag':'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png'},{'name':'Pennsylvania','flag':'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png'},{'name':'Rhode Island','flag':'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png'},{'name':'South Carolina','flag':'6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png'},{'name':'South Dakota','flag':'1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png'},{'name':'Tennessee','flag':'9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png'},{'name':'Texas','flag':'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png'},{'name':'Utah','flag':'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png'},{'name':'Vermont','flag':'4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png'},{'name':'Virginia','flag':'4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png'},{'name':'Washington','flag':'5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png'},{'name':'West Virginia','flag':'2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png'},{'name':'Wisconsin','flag':'2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png'},{'name':'Wyoming','flag':'b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png'}];
    });