<link rel="stylesheet" href="../../assets/vendor/bootstrap-datepicker/bootstrap-datepicker.css" type="text/css" media="screen" charset="utf-8">
<style>
.modal-open .modal{
  margin-top:100px;
}
</style>
<script id="template/alert/alert.html" type="text/ng-template">
    <div class="alert" ng-class="['alert-' + (type || 'warning'), closeable ? 'alert-dismissible' : null]" role="alert">
        <button ng-show="closeable" type="button" class="close" ng-click="close()">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">Close</span>
        </button>
        <div ng-transclude></div>
    </div>
</script>
<script id="template/rating/rating.html" type="text/ng-template">
	 <span ng-class="rating" ng-mouseleave="reset()" ng-keydown="onKeydown($event)" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="{{range.length}}" aria-valuenow="{{value}}">
    <i ng-repeat="r in range track by $index" ng-mouseenter="enter($index + 1)" ng-click="rate($index + 1)" class="icon" ng-class="$index < value && (r.stateOn || 'wb-star orange-600') || (r.stateOff || 'wb-star')">
      <span class="sr-only">({{ $index < value ? '*' : ' ' }})</span>
    </i>
  </span>
</script>
<script id="template/tabs/tabset.html" type="text/ng-template">
	<div>
    <ul class="nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
    <div class="tab-content">
      <div class="tab-pane padding-top-20" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab"> </div>
    </div>
  </div>
</script>
<script id="template/datepicker/datepicker.html" type="text/ng-template">
  <div class="datepicker datepicker-inline" ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
    <daypicker ng-switch-when="day" tabindex="0"></daypicker>
    <monthpicker ng-switch-when="month" tabindex="0"></monthpicker>
    <yearpicker ng-switch-when="year" tabindex="0"></yearpicker>
  </div>"
</script>
<script id="template/datepicker/day.html" type="text/ng-template">
    <table class=" table-condensed" role="grid" aria-labelledby="{{uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
      <thead>
        <tr>
          <th class="prev" ng-click="move(-1)" tabindex="-1">«</th>
          <th class="datepicker-switch" colspan="{{5}}" id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;">{{title}}</th>
          <th class="next" ng-click="move(1)" tabindex="-1">»</button></th>
        </tr>
        <tr>
          <th ng-repeat="label in labels track by $index" class="dow text-center">{{label.abbr}}</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in rows track by $index">
          <td ng-repeat="dt in row track by dt.date" class="text-center day" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}" ng-class="{'active': dt.selected, old: !isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1">
            {{dt.label}}
          </td>
        </tr>
      </tbody>
    </table>
</script>
<script id="template/datepicker/month.html" type="text/ng-template">
<table role="grid" aria-labelledby="{{uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
    <thead>
       <tr>
        <th class="prev" ng-click="move(-1)" tabindex="-1">«</th>
        <th class="datepicker-switch" id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;">{{title}}</th>
        <th class="next" ng-click="move(1)" tabindex="-1">»</button></th>
       </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in rows track by $index">
        <td ng-repeat="dt in row track by dt.date" class="text-center month" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}" ng-class="{'active': dt.selected, old: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1" style="cursor:pointer">
            {{dt.label}}
        </td>
       </tr>
    </tbody>
</table>
</script>
<script id="template/datepicker/year.html" type="text/ng-template">
<table role="grid" aria-labelledby="{{uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
    <thead>
       <tr>
        <th class="prev" ng-click="move(-1)" tabindex="-1">«</th>
        <th colspan="3" class="datepicker-switch" id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;">{{title}}</th>
        <th class="next" ng-click="move(1)" tabindex="-1">»</button></th>
       </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in rows track by $index">
        <td ng-repeat="dt in row track by dt.date" class="text-center year" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}" ng-class="{'active': dt.selected, old: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1" style="cursor:pointer">
            {{dt.label}}
        </td>
       </tr>
    </tbody>
</table>
</script>
<script id="template/timepicker/timepicker.html" type="text/ng-template">
    <table>
    	<tbody>
    		<tr class="text-center">
    			<td><a ng-click="incrementHours()" class="btn btn-link"><span class="wb-chevron-up"></span></a></td>
    			<td>&nbsp;</td>
    			<td><a ng-click="incrementMinutes()" class="btn btn-link"><span class="wb-chevron-up"></span></a></td>
    			<td ng-show="showMeridian"></td>
    		</tr>
    		<tr>
    			<td class="form-group" ng-class="{'has-error': invalidHours}">
    				<input style="width:50px;" type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
    			</td>
    			<td>:</td>
    			<td class="form-group" ng-class="{'has-error': invalidMinutes}">
    				<input style="width:50px;" type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
    			</td>
    			<td ng-show="showMeridian"><button type="button" class="btn btn-default text-center" ng-click="toggleMeridian()">{{meridian}}</button></td>
    		</tr>
    		<tr class="text-center">
    			<td><a ng-click="decrementHours()" class="btn btn-link"><span class="wb-chevron-down"></span></a></td>
    			<td>&nbsp;</td>
    			<td><a ng-click="decrementMinutes()" class="btn btn-link"><span class="wb-chevron-down"></span></a></td>
    			<td ng-show="showMeridian"></td>
    		</tr>
    	</tbody>
    </table>
</script>
<!-- Page -->
<div class="page-header">
  <h1 class="page-title">UI Bootstrap</h1>
	<p>Bootstrap components written in pure <a href="http://angularjs.org">AngularJS</a> by the <a href="http://angular-ui.github.io">AngularUI Team</a> Team</p>
</div>
<div class="page-content page-content-example container-fluid">
  <div class="panel">
    <div class="panel-body">
      <div class="row">
        <!-- Alert -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Alert<small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/alert">ui.bootstrap.alert</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="AlertDemoController">
                  <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
                  <button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
                </div>
                <div class="col-md-6">
                  <p>Alert is an AngularJS-version of bootstrap's alert.</p>
                  <p>This directive can be used to generate alerts from the dynamic model data (using the <code>ng-repeat</code> directive);</p>
                  <p>The presence of the <code>close</code> attribute determines if a close button is displayed</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Alert -->

        <!-- Buttons -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Buttons<small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/buttons">ui.bootstrap.buttons</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="ButtonsDemoController">
                  <h4>Single toggle</h4>
                  <pre>{{singleModel}}</pre>
                  <button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
                    Single Toggle
                  </button>
                  <h4 class="margin-top-15">Checkbox</h4>
                  <pre>{{checkModel}}</pre>
                  <div class="btn-group">
                    <label class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</label>
                    <label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</label>
                    <label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</label>
                  </div>
                  <h4 class="margin-top-15">Radio &amp; Uncheckable Radio</h4>
                  <pre>{{radioModel || 'null'}}</pre>
                  <div class="btn-group margin-bottom-10">
                    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
                    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
                    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
                  </div>
                  <div class="btn-group margin-bottom-10">
                    <label class="btn btn-success" ng-model="radioModel" btn-radio="'Left'" uncheckable>Left</label>
                    <label class="btn btn-success" ng-model="radioModel" btn-radio="'Middle'" uncheckable>Middle</label>
                    <label class="btn btn-success" ng-model="radioModel" btn-radio="'Right'" uncheckable>Right</label>
                  </div>
                </div>
                <div class="col-md-6">
                  <p>There are two directives that can make a group of buttons behave like a set of checkboxes, radio buttons, or a hybrid where radio buttons can be unchecked.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Buttons -->
        
        <!-- Carousel -->
        <div class="col-lg-12">
          <div class="example-wrap">
					  <h4 class="example-title">Carousel  <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/carousel">ui.bootstrap.carousel</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="CarouselDemoController">
                  <div class="margin-bottom-10" style="height: 305px">
                    <carousel interval="myInterval">
                      <slide ng-repeat="slide in slides" active="slide.active">
                      <img ng-src="{{slide.image}}" style="margin:auto;">
                      <div class="carousel-caption">
                        <h4>Slide {{$index}}</h4>
                        <p>{{slide.text}}</p>
                      </div>
                      </slide>
                    </carousel>
                  </div>
                    <div class="col-md-6">
                      <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
                    </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 class="col-md-6">
                  <p>Carousel creates a carousel similar to bootstrap's image carousel.</p>
                  <p>The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the <code>ngTouch</code> module as a dependency.</p>
                  <p>Use a <code>&lt;carousel&gt;</code> element with <code>&lt;slide&gt;</code> elements inside it.  It will automatically cycle through the slides at a given rate, and a current-index variable will be kept in sync with the currently visible slide.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Carousel -->

        <!-- Collapse -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Collapse  <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/collapse">ui.bootstrap.collapse</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="CollapseDemoController">
                  <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
                  <hr>
                  <div collapse="isCollapsed">
                    <div class="well well-lg">Some content</div> 
                  </div>
                </div>
                <div class="col-md-6">
                  <p>AngularJS version of Bootstrap's collapse plugin. Provides a simple way to hide and show an element with a css transition</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Collapse -->

        <!-- Dropdown -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Dropdown  <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/dropdown">ui.bootstrap.dropdown</a>)</small></h4>
            <div class="example">
              <div class="row">
               <div class="col-md-6 show-grid" ng-controller="DropdownDemoController">
                  <!-- Single button -->
                  <div class="btn-group" dropdown is-open="status.isopen">
                    <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
                      Button dropdown <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                    </ul>
                  </div>

                  <!-- Split button -->
                  <div class="btn-group" dropdown>
                    <button type="button" class="btn btn-danger">Action</button>
                    <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
                      <span class="caret"></span>
                      <span class="sr-only">Split button!</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                    </ul>
                  </div>

                  <hr />
                  <p>
                      <button type="button" class="btn btn-default 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>
                </div>
                <div class="col-md-6">
						      <p>Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.You can either use <code>is-open</code> to toggle or add inside a <code>&lt;a dropdown-toggle&gt;</code> element to toggle it when is clicked.There is also the <code>on-toggle(open)</code> optional expression fired when dropdown changes state.</p>
					      </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Dropdown -->
        
        <!-- Datepicker -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Datepicker  <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/datepicker">ui.bootstrap.datepicker</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="DatepickerDemoController">
                  <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
                  <h4>Inline</h4>
                    <datepicker ng-model="dt" min-date="minDate" show-weeks="true"></datepicker>

                  <h4>Popup</h4>
                  <div class="row">
                    <div class="col-md-6">
                      <p class="input-group">
                         <span class="input-group-addon" ng-click="open($event)">
                          <i class="wb-calendar"></i>
                        </span>
                        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                      </p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                      <label>Format:</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 margin-bottom-10" ng-click="today()">Today</button>
                  <button type="button" class="btn btn-sm btn-default margin-bottom-10" ng-click="dt = '2009-08-24'">2009-08-24</button>
                  <button type="button" class="btn btn-sm btn-danger margin-bottom-10" ng-click="clear()">Clear</button>
                  <button type="button" class="btn btn-sm btn-default margin-bottom-10" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
                </div>
                <div class="col-md-6">
                  <p>A clean, flexible, and fully customizable date picker.</p>

                  <p>User can navigate through months and years.
                  The datepicker shows dates that come from other than the main month being displayed. These other dates are also selectable.</p>

                  <p>Everything is formatted using the <a href="http://docs.angularjs.org/api/ng.filter:date">date filter</a> and thus is also localized.</p>

                  <h4>Datepicker Settings</h4>

                  <p>All settings can be provided as attributes in the <code>datepicker</code> or globally configured through the <code>datepickerConfig</code>.</p>

                  <ul>
                    <li><p><code>ng-model</code> <i class="glyphicon glyphicon-eye-open"></i> : The date object.</p></li>
                    <li><p><code>datepicker-mode</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: 'day')</em> : Current mode of the datepicker <em>(day|month|year)</em>. Can be used to initialize datepicker to specific mode.</p></li>
                    <li><p><code>min-date</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Default: null)</em> : Defines the minimum available date.</p></li>
                    <li><p><code>max-date</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Default: null)</em> : Defines the maximum available date.</p></li>
                    <li><p><code>date-disabled (date, mode)</code><em>(Default: null)</em> : An optional expression to disable visible options based on passing date and current mode <em>(day|month|year)</em>.</p></li>
                    <li><p><code>show-weeks</code><em>(Defaults: true)</em> : Whether to display week numbers.</p></li>
                    <li><p><code>starting-day</code><em>(Defaults: 0)</em> : Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).</p></li>
                    <li><p><code>init-date</code> : The initial date view when no model value is not specified.</p></li>
                    <li><p><code>min-mode</code><em>(Defaults: 'day')</em> : Set a lower limit for mode.</p></li>
                    <li><p><code>max-mode</code><em>(Defaults: 'year')</em> : Set an upper limit for mode.</p></li>
                    <li><p><code>format-day</code><em>(Default: 'dd')</em> : Format of day in month.</p></li>
                    <li><p><code>format-month</code><em>(Default: 'MMMM')</em> : Format of month in year.</p></li>
                    <li><p><code>format-year</code><em>(Default: 'yyyy')</em> : Format of year in year range.</p></li>
                    <li><p><code>format-day-header</code><em>(Default: 'EEE')</em> : Format of day in week header.</p></li>
                    <li><p><code>format-day-title</code><em>(Default: 'MMMM yyyy')</em> : Format of title when selecting day.</p></li>
                    <li><p><code>format-month-title</code><em>(Default: 'yyyy')</em> : Format of title when selecting month.</p></li>
                    <li><p><code>year-range</code><em>(Default: 20)</em> : Number of years displayed in year selection.</p></li>
                  </ul>

                  <h4>Popup Settings</h4>

                  <p>Options for datepicker can be passed as JSON using the <code>datepicker-options</code> attribute.
                  Specific settings for the <code>datepicker-popup</code>, that can globally configured through the <code>datepickerPopupConfig</code>, are:</p>

                  <ul>
                    <li><p><code>datepicker-popup</code><em>(Default: 'yyyy-MM-dd')</em> : The format for displayed dates.</p></li>
                    <li><p><code>show-button-bar</code><em>(Default: true)</em> : Whether to display a button bar underneath the datepicker.</p></li>
                    <li><p><code>current-text</code><em>(Default: 'Today')</em> : The text to display for the current day button.</p></li>
                    <li><p><code>clear-text</code><em>(Default: 'Clear')</em> : The text to display for the clear button.</p></li>
                    <li><p><code>close-text</code><em>(Default: 'Done')</em> : The text to display for the close button.</p></li>
                    <li><p><code>close-on-date-selection</code><em>(Default: true)</em> : Whether to close calendar when a date is chosen.</p></li>
                    <li><p><code>datepicker-append-to-body</code><em>(Default: false)</em>: Append the datepicker popup element to <code>body</code>, rather than inserting after <code>datepicker-popup</code>. For global configuration, use <code>datepickerPopupConfig.appendToBody</code>.</p></li>
                  </ul>

                  <h4>Keyboard Support</h4>

                  <p>Depending on datepicker's current mode, the date may reffer either to day, month or year. Accordingly, the term view reffers either to a month, year or year range.</p>

                  <ul>
                    <li><code>Left</code>: 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.</li>
                    <li><code>Right</code>: 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.</li>
                    <li><code>Up</code>: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.</li>
                    <li><code>Down</code>: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.</li>
                    <li><code>PgUp</code>: 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.</li>
                    <li><code>PgDn</code>: 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.</li>
                    <li><code>Home</code>: Move to the first date of the view.</li>
                    <li><code>End</code>: Move to the last date of the view.</li>
                    <li><code>Enter</code>/<code>Space</code>: Select date.</li>
                    <li><code>Ctrl</code>+<code>Up</code>: Move to an upper mode.</li>
                    <li><code>Ctrl</code>+<code>Down</code>: Move to a lower mode.</li>
                    <li><code>Esc</code>: Will close popup, and move focus to the input.</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Datepicker -->

        <!-- Modal -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Modal  <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/modal">ui.bootstrap.modal</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="ModalDemoController">
                  <script type="text/ng-template" id="myModalContent.html">
                        <div class="modal-header">
                            <h3 class="modal-title">I am a modal!</h3>
                        </div>
                        <div class="modal-body">
                            <ul>
                                <li ng-repeat="item in items">
                                    <a ng-click="selected.item = item">{{ item }}</a>
                                </li>
                            </ul>
                            Selected: <b>{{ selected.item }}</b>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" ng-click="ok()">OK</button>
                            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                        </div>
                    </script>

                    <button class="btn btn-default margin-bottom-10" ng-click="open()">Open me!</button>
                    <button class="btn btn-default margin-bottom-10" ng-click="open('lg')">Large modal</button>
                    <button class="btn btn-default margin-bottom-10" ng-click="open('sm')">Small modal</button>
                    <button class="btn btn-default margin-bottom-10" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
                    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
                </div>
                <div class="col-md-6">
                  <p><code>$modal</code> is a service to quickly create AngularJS-powered modal windows.Creating custom modals is straightforward: create a partial view, its controller and reference them when using the service.</p>
                  <p>The <code>$modal</code> service has only one method: <code>open(options)</code> where available options are like follows:</p>

                  <ul>
                    <li><code>templateUrl</code> - a path to a template representing modal's content</li>
                    <li><code>template</code> - inline template representing the modal's content</li>
                    <li><code>scope</code> - a scope instance to be used for the modal's content (actually the <code>$modal</code> service is going to create a child scope of a provided scope). Defaults to <code>$rootScope</code></li>
                    <li><code>controller</code> - a controller for a modal instance - it can initialize scope used by modal. Accepts the "controller-as" syntax in the form 'SomeCtrl as myctrl'; can be injected with <code>$modalInstance</code></li>
                    <li><code>controllerAs</code> - an alternative to the controller-as syntax, matching the API of directive definitions. Requires the <code>controller</code> option to be provided as well</li>
                    <li><code>resolve</code> - members that will be resolved and passed to the controller as locals; it is equivalent of the <code>resolve</code> property for AngularJS routes</li>
                    <li><code>backdrop</code> - controls presence of a backdrop. Allowed values: true (default), false (no backdrop), <code>'static'</code> - backdrop is present but modal window is not closed when clicking outside of the modal window.</li>
                    <li><code>keyboard</code> - indicates whether the dialog should be closable by hitting the ESC key, defaults to true</li>
                    <li><code>backdropClass</code> - additional CSS class(es) to be added to a modal backdrop template</li>
                    <li><code>windowClass</code> - additional CSS class(es) to be added to a modal window template</li>
                    <li><code>windowTemplateUrl</code> - a path to a template overriding modal's window template</li>
                    <li><code>size</code> - optional size of modal window. Allowed values: <code>'sm'</code> (small) or  <code>'lg'</code> (large). Requires Bootstrap 3.1.0 or later</li>
                  </ul>

                  <p>The <code>open</code> method returns a modal instance, an object with the following properties:</p>

                  <ul>
                    <li><code>close(result)</code> - a method that can be used to close a modal, passing a result</li>
                    <li><code>dismiss(reason)</code> - a method that can be used to dismiss a modal, passing a reason</li>
                    <li><code>result</code> - a promise that is resolved when a modal is closed and rejected when a modal is dismissed</li>
                    <li><code>opened</code> - a promise that is resolved when a modal gets opened after downloading content's template and resolving all variables</li>
                  </ul>

                  <p>In addition the scope associated with modal's content is augmented with 2 methods:</p>

                  <ul>
                    <li><code>$close(result)</code></li>
                    <li><code>$dismiss(reason)</code></li>
                  </ul>

                  <p>Those methods make it easy to close a modal window without a need to create a dedicated controller.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Modal-->
        
        <!-- Pagination -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Pagination    <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/pagination">ui.bootstrap.pagination</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="PaginationDemoController">
                  <h4>Default</h4>
                    <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
                    <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;"></pagination>
                    <pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
                    <pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
                    <pre>The selected page no: {{currentPage}}</pre>
                    <button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

                    <hr />
                    <h4>Pager</h4>
                    <pager total-items="totalItems" ng-model="currentPage"></pager>

                    <hr />
                    <h4>Limit the maximum visible buttons</h4>
                    <div class="col-md-12"><pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination></div>
                    <div class="col-md-12"><pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination></div>
                    <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
                </div>
                <div class="col-md-6">
                  <p>A lightweight pagination directive that is focused on ... providing pagination &amp; will take care of visualising a pagination bar and enable / disable buttons correctly!</p>

                  <h4>Pagination Settings</h4>

                  <p>Settings can be provided as attributes in the <code>&lt;pagination&gt;</code> or globally configured through the <code>paginationConfig</code>.</p>

                  <ul>
                    <li><p><code>ng-model</code> <i class="glyphicon glyphicon-eye-open"></i> : Current page number. First page is 1.</p></li>
                    <li><p><code>total-items</code> <i class="glyphicon glyphicon-eye-open"></i> : Total number of items in all pages.</p></li>
                    <li><p><code>items-per-page</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: 10)</em> : Maximum number of items per page. A value less than one indicates all items on one page.</p></li>
                    <li><p><code>max-size</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: null)</em> : Limit number for pagination size.</p></li>
                    <li><p><code>num-pages</code> <small class="badge">readonly</small><em>(Defaults: angular.noop)</em> : An optional expression assigned the total number of pages to display.</p></li>
                    <li><p><code>rotate</code><em>(Defaults: true)</em> : Whether to keep current page in the middle of the visible ones.</p></li>
                    <li><p><code>direction-links</code><em>(Default: true)</em> : Whether to display Previous / Next buttons.</p></li>
                    <li><p><code>previous-text</code><em>(Default: 'Previous')</em> : Text for Previous button.</p></li>
                    <li><p><code>next-text</code><em>(Default: 'Next')</em> : Text for Next button.</p></li>
                    <li><p><code>boundary-links</code><em>(Default: false)</em> : Whether to display First / Last buttons.</p></li>
                    <li><p><code>first-text</code><em>(Default: 'First')</em> : Text for First button.</p></li>
                    <li><p><code>last-text</code><em>(Default: 'Last')</em> : Text for Last button.</p></li>
                  </ul>

                  <h4>Pager Settings</h4>

                  <p>Settings can be provided as attributes in the <code>&lt;pager&gt;</code> or globally configured through the <code>pagerConfig</code>. <br>
                  For <code>ng-model</code>, <code>total-items</code>, <code>items-per-page</code> and <code>num-pages</code> see pagination settings. Other settings are:</p>

                  <ul>
                    <li><p><code>align</code><em>(Default: true)</em> :Whether to align each link to the sides.</p></li>
                    <li><p><code>previous-text</code><em>(Default: '« Previous')</em> : Text for Previous button.</p></li>
                    <li><p><code>next-text</code><em>(Default: 'Next »')</em> : Text for Next button.</p></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Pagination-->

        <!-- Popover -->
         <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Popover      <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/popover">ui.bootstrap.popover</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="PopoverDemoController">
                  <h4>Dynamic</h4>
                    <div class="form-group">
                      <label>Popup Text:</label>
                      <input type="text" ng-model="dynamicPopover" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Popup Title:</label>
                      <input type="text" ng-model="dynamicPopoverTitle" class="form-control">
                    </div>
                    <button popover="{{dynamicPopover}}" popover-title="{{dynamicPopoverTitle}}" class="btn btn-default">Dynamic Popover</button>
                    
                    <hr />
                    <h4>Positional</h4>
                    <button popover-placement="top" popover="On the Top!" class="btn btn-default">Top</button>
                    <button popover-placement="left" popover="On the Left!" class="btn btn-default">Left</button>
                    <button popover-placement="right" popover="On the Right!" class="btn btn-default">Right</button>
                    <button popover-placement="bottom" popover="On the Bottom!" class="btn btn-default">Bottom</button>
                    
                    <hr />
                    <h4>Triggers</h4>
                    <p>
                      <button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="btn btn-default">Mouseenter</button>
                    </p>
                    <input type="text" value="Click me!" 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" popover="I fade in and out!" class="btn btn-default">fading</button>
                    <button popover="I have a title!" popover-title="The title." class="btn btn-default">title</button>
                </div>
                <div class="col-md-6">
                   <p>A lightweight, extensible directive for fancy popover creation. The popover directive supports multiple placements, optional transition animation, and more.</p>

                  <p>Like the Bootstrap jQuery plugin, the popover <strong>requires</strong> the tooltip module.</p>

                  <p>The popover directives provides several optional attributes to control how it will display:</p>

                  <ul>
                    <li><code>popover-title</code>: A string to display as a fancy title.</li>
                    <li><code>popover-placement</code>: Where to place it? Defaults to "top", but also accepts "bottom", "left", "right".</li>
                    <li><code>popover-animation</code>: Should it fade in and out? Defaults to "true".</li>
                    <li><code>popover-popup-delay</code>: For how long should the user have to have the mouse over the element before the popover shows (in milliseconds)? Defaults to 0.</li>
                    <li><code>popover-trigger</code>: What should trigger the show of the popover? See the <code>tooltip</code> directive for supported values.</li>
                    <li><code>popover-append-to-body</code>: Should the tooltip be appended to <code>$body</code> instead of the parent element?</li>
                  </ul>

                  <p>The popover directives require the <code>$position</code> service.</p>

                  <p>The popover directive also supports various default configurations through the $tooltipProvider. See the <a href="#tooltip">tooltip</a> section for more information.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Popover -->

        <!-- Progressbar  -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Progressbar <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/progressbar">ui.bootstrap.progressbar</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="ProgressbarDemoController">
                  <h4>Static</h4>
                    <div class="row">
                        <div class="col-sm-4"><progressbar value="55"></progressbar></div>
                        <div class="col-sm-4"><progressbar class="progress-striped" value="22" type="warning">22%</progressbar></div>
                        <div class="col-sm-4"><progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progressbar></div>
                    </div>

                    <hr />
                    <h4>Dynamic <button class="btn btn-sm btn-primary" type="button" ng-click="random()">Randomize</button></h4>
                    <progressbar max="max" value="dynamic"><span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span></progressbar>
                    
                    <small><em>No animation</em></small>
                    <progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>

                    <small><em>Object (changes type based on value)</em></small>
                    <progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></progressbar>
                    
                    <hr />
                    <h4>Stacked <button class="btn btn-sm btn-primary" type="button" ng-click="randomStacked()">Randomize</button></h4>
                    <progress><bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></bar></progress>
                </div>
                <div class="col-md-6">
                  <p>A progress bar directive that is focused on providing feedback on the progress of a workflow or action.</p>

                  <p>It supports multiple (stacked) bars into the same <code>&lt;progress&gt;</code> element or a single <code>&lt;progressbar&gt;</code> elemtnt with optional <code>max</code> attribute and transition animations.</p>

                  <h4>Settings</h4>

                  <code>&lt;progressbar&gt;</code>

                  <ul>
                    <li><p><code>value</code><i class="glyphicon glyphicon-eye-open"></i> : The current value of progress completed.</p></li>
                    <li><p><code>type</code><em>(Default: null)</em> : Style type. Possible values are 'success', 'warning' etc.</p></li>
                    <li><p><code>max</code><em>(Default: 100)</em> : A number that specifies the total value of bars that is required.</p></li>
                    <li><p><code>animate</code><em>(Default: true)</em> : Whether bars use transitions to achieve the width change.</p></li>
                  </ul>

                  <h4>Stacked</h4>

                  <p>Place multiple <code>&lt;bars&gt;</code> into the same <code>&lt;progress&gt;</code> element to stack them.
                  <code>&lt;progress&gt;</code> supports <code>max</code> and <code>animate</code> &amp;  <code>&lt;bar&gt;</code> supports  <code>value</code> and <code>type</code> attributes.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Progressbar  -->

         <!-- Rating  -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Rating <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/rating">ui.bootstrap.rating</a>)</small></h4>
            <div class="example">
              <div class="row">

                <div class="col-md-6 show-grid" ng-controller="RatingDemoController">
                  <h4>Default</h4>
                    <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>
                    <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 class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>
                    <button class="btn btn-sm btn-default" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button>
                    <hr />
                </div>
                <div class="col-md-6">

                  <p>Rating directive that will take care of visualising a star rating bar.</p>

                  <h4>Settings</h4>

                  <code>&lt;rating&gt;</code>

                  <ul>
                    <li><p><code>ng-model</code> <i class="glyphicon glyphicon-eye-open"></i> : The current rate.</p></li>
                    <li><p><code>max</code><em>(Defaults: 5)</em> : Changes the number of icons.</p></li>
                    <li><p><code>readonly</code> <i class="icon-eye-open"></i><em>(Defaults: false)</em> : Prevent user's interaction.</p></li>
                    <li><p><code>on-hover(value)</code> : An optional expression called when user's mouse is over a particular icon.</p></li>
                    <li><p><code>on-leave()</code> : An optional expression called when user's mouse leaves the control altogether.</p></li>
                    <li><p><code>state-on</code><em>(Defaults: null)</em> : A variable used in template to specify the state (class, src, etc) for selected icons.</p></li>
                    <li><p><code>state-off</code><em>(Defaults: null)</em> : A variable used in template to specify the state for unselected icons.</p></li>
                    <li><p><code>rating-states</code><em>(Defaults: null)</em> : An array of objects defining properties for all icons. In default template, <code>stateOn</code> &amp; <code>stateOff</code> property is used to specify the icon's class.</p></li>
                  </ul>     
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Rating -->
        <!-- Tabs -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Tabs  <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/tabs">ui.bootstrap.tabs</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="TabsDemoController">
                  <p>Select a tab by setting active binding to true:</p>
                  <p>
                      <button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
                      <button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
                  </p>
                  <p>
                      <button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
                  </p>
                  <hr />

                  <tabset>
                      <tab heading="Static title">Static content</tab>
                      <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
                        {{tab.content}}
                      </tab>
                      <tab select="alertMe()">
                        <tab-heading>
                          <i class="glyphicon glyphicon-bell"></i> Alert!
                        </tab-heading>
                        I've got an HTML heading, and a select callback. Pretty cool!
                      </tab>
                  </tabset>

                  <hr />

                  <tabset vertical="true" type="pills">
                      <tab heading="Vertical 1">Vertical content 1</tab>
                      <tab heading="Vertical 2">Vertical content 2</tab>
                  </tabset>

                  <hr />

                  <tabset justified="true">
                      <tab heading="Justified">Justified content</tab>
                      <tab heading="SJ">Short Labeled Justified content</tab>
                      <tab heading="Long Justified">Long Labeled Justified content</tab>
                  </tabset>
                </div>
                <div class="col-md-6">
                  <p>AngularJS version of the tabs directive.</p>

                  <h4>Settings</h4>

                  <code>&lt;tabset&gt;</code>

                  <ul>
                    <li><p><code>vertical</code><em>(Defaults: false)</em> : Whether tabs appear vertically stacked.</p></li>
                    <li><p><code>justified</code><em>(Defaults: false)</em> : Whether tabs fill the container and have a consistent width.</p></li>
                    <li><p><code>type</code><em>(Defaults: 'tabs')</em> : Navigation type. Possible values are 'tabs' and 'pills'.</p></li>
                    </ul>

                    <code>&lt;tab&gt;</code>

                    <ul>
                    <li><p><code>heading</code> or <code>&lt;tab-heading&gt;</code> : Heading text or HTML markup.</p></li>
                    <li><p><code>active</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: false)</em> : Whether tab is currently selected.</p></li>
                    <li><p><code>disabled</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: false)</em> : Whether tab is clickable and can be activated.</p></li>
                    <li><p><code>select()</code><em>(Defaults: null)</em> : An optional expression called when tab is activated.</p></li>
                    <li><p><code>deselect()</code><em>(Defaults: null)</em> : An optional expression called when tab is deactivated.</p></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Tabs -->
        
        <!-- Timepicker  -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Timepicker   <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/timepicker">ui.bootstrap.timepicker</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="TimepickerDemoController">
                  <timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>

                  <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 class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
                  <button class="btn btn-default" ng-click="update()">Set to 14:00</button>
                  <button class="btn btn-danger" ng-click="clear()">Clear</button>
                </div>
                <div class="col-md-6">
                  <p>A lightweight &amp; configurable timepicker directive.</p>

                  <h4>Settings</h4>

                  <p>All settings can be provided as attributes in the <code>&lt;timepicker&gt;</code> or globally configured through the <code>timepickerConfig</code>.</p>

                  <ul>
                    <li><p><code>ng-model</code> <i class="glyphicon glyphicon-eye-open"></i> : The Date object that provides the time state.</p></li>
                    <li><p><code>hour-step</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: 1)</em> : Number of hours to increase or decrease when using a button.</p></li>
                    <li><p><code>minute-step</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: 1)</em> : Number of minutes to increase or decrease when using a button.</p></li>
                    <li><p><code>show-meridian</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: true)</em> : Whether to display 12H or 24H mode.</p></li>
                    <li><p><code>meridians</code><em>(Defaults: null)</em> : Meridian labels based on locale. To override you must supply an array like ['AM', 'PM'].</p></li>
                    <li><p><code>readonly-input</code><em>(Defaults: false)</em> : Whether user can type inside the hours &amp; minutes input.</p></li>
                    <li><p><code>mousewheel</code><em>(Defaults: true)</em> : Whether user can scroll inside the hours &amp; minutes input to increase or decrease it's values.</p></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Timepicker  -->

         <!-- Tooltip  -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Tooltip   <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/tooltip">ui.bootstrap.tooltip</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid" ng-controller="TooltipDemoController">
                  <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="#" tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
                      sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
                      aliquam. Tincidunt lobortis feugiat vivamus at 
                      <a href="#" tooltip-placement="left" tooltip="On the Left!">left</a> eget
                      arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
                      <a href="#" tooltip-placement="right" tooltip="On the Right!">right</a> 
                      nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas 
                      <a href="#" tooltip-placement="bottom" tooltip="On the Bottom!">bottom</a> 
                      pharetra convallis posuere morbi leo urna, 
                      <a href="#" tooltip-animation="false" tooltip="I don't fade. :-(">fading</a>
                      at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
                      <a href="#" tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
                    </p>

                    <p>
                      I can even contain HTML. <a href="#" tooltip-html-unsafe="{{htmlTooltip}}">Check me out!</a>
                    </p>

                    <form role="form">
                      <div class="form-group">
                        <label>Or use custom triggers, like focus: </label>
                        <input type="text" value="Click me!" 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"
                          tooltip="Enter something in this input field to disable this tooltip"
                          tooltip-placement="top"
                          tooltip-trigger="mouseenter"
                          tooltip-enable="!inputModel" />
                      </div>
                    </form>
                </div>

                <div class="col-md-6">
                  <p>A lightweight, extensible directive for fancy tooltip creation. The tooltip directive supports multiple placements, optional transition animation, and more.</p>

                  <p>There are two versions of the tooltip: <code>tooltip</code> and <code>tooltip-html-unsafe</code>. The former takes text only and will escape any HTML provided. The latter takes whatever HTML is provided and displays it in a tooltip; it called "unsafe" because the HTML is not sanitized. <em>The user is responsible for ensuring the content is safe to put into the DOM!</em></p>

                  <p>The tooltip directives provide several optional attributes to control how they will display:</p>

                  <ul>
                    <li><code>tooltip-placement</code>: Where to place it? Defaults to "top", but also accepts "bottom", "left", "right".</li>
                    <li><code>tooltip-animation</code>: Should it fade in and out? Defaults to "true".</li>
                    <li><code>tooltip-popup-delay</code>: For how long should the user have to have the mouse over the element before the tooltip shows (in milliseconds)? Defaults to 0.</li>
                    <li><code>tooltip-trigger</code>: What should trigger a show of the tooltip?</li>
                    <li><code>tooltip-append-to-body</code>: Should the tooltip be appended to <code>$body</code> instead of the parent element?</li>
                  </ul>

                  <p>The tooltip directives require the <code>$position</code> service.</p>

                  <p><strong>Triggers</strong></p>

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

                  <ul>
                    <li><code>mouseenter</code>: <code>mouseleave</code></li>
                    <li><code>click</code>: <code>click</code></li>
                    <li><code>focus</code>: <code>blur</code></li>
                  </ul>

                  <p>For any non-supported value, the trigger will be used to both show and hide the tooltip.</p>

                  <p><strong>$tooltipProvider</strong></p>

                  <p>Through the <code>$tooltipProvider</code>, you can change the way tooltips and popovers behave by default; the attributes above always take precedence. The following methods are available:</p>

                  <ul>
                    <li><code>setTriggers( obj )</code>: Extends the default trigger mappings mentioned above with mappings of your own. E.g. <code>{ 'openTrigger': 'closeTrigger' }</code>.</li>
                    <li><p><code>options( obj )</code>: Provide a set of defaults for certain tooltip and popover attributes. Currently supports 'placement', 'animation', 'popupDelay', and <code>appendToBody</code>. Here are the defaults:</p>

                    <pre>
    placement: 'top',
    animation: true,
    popupDelay: 0,
    appendToBody: false
                    </pre>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Tooltip  -->
        
        <!-- Typeahead -->
        <div class="col-lg-12">
          <div class="example-wrap">
            <h4 class="example-title">Typeahead   <small>(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/typeahead">ui.bootstrap.typeahead</a>)</small></h4>
            <div class="example">
              <div class="row">
                <div class="col-md-6 show-grid">
                  <script type="text/ng-template" id="customTemplate.html">
                    <a>
                        <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
                        <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
                    </a>
                  </script>
                  <div ng-controller="TypeaheadDemoController">

                      <h4>Static arrays</h4>
                      <pre>Model: {{selected | json}}</pre>
                      <input type="text" ng-model="selected" 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" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">
                  </div>
                </div>
                <div class="col-md-6">
                  <p>Typeahead is a AngularJS version of <a href="http://getbootstrap.com/2.3.2/javascript.html#typeahead">Bootstrap v2's typeahead plugin</a>. This directive can be used to quickly create elegant typeaheads with any form text input.</p>

                  <p>It is very well integrated into AngularJS as it uses a subset of the <a href="http://docs.angularjs.org/api/ng.directive:select">select directive</a> syntax, which is very flexible. Supported expressions are:</p>

                  <ul>
                    <li><em>label</em> for <em>value</em> in <em>sourceArray</em></li>
                    <li><em>select</em> as <em>label</em> for <em>value</em> in <em>sourceArray</em></li>
                  </ul>

                  <p>The <code>sourceArray</code> expression can use a special <code>$viewValue</code> variable that corresponds to the value entered inside the input.</p>

                  <p>This directive works with promises, meaning you can retrieve matches using the <code>$http</code> service with minimal effort.</p>

                  <p>The typeahead directives provide several attributes:</p>

                  <ul>
                    <li><p><code>ng-model</code> <i class="glyphicon glyphicon-eye-open"></i> : Assignable angular expression to data-bind to</p></li>
                    <li><p><code>typeahead</code> <i class="glyphicon glyphicon-eye-open"></i> : Comprehension Angular expression (see <a href="http://docs.angularjs.org/api/ng.directive:select">select directive</a>)</p></li>
                    <li><p><code>typeahead-append-to-body</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: false)</em> : Should the typeahead popup be appended to $body instead of the parent element?</p></li>
                    <li><p><code>typeahead-editable</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: true)</em> : Should it restrict model values to the ones selected from the popup only ?</p></li>
                    <li><p><code>typeahead-input-formatter</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: undefined)</em> : Format the ng-model result after selection</p></li>
                    <li><p><code>typeahead-loading</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: angular.noop)</em> : Binding to a variable that indicates if matches are being retrieved asynchronously</p></li>
                    <li><p><code>typeahead-min-length</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: 1)</em> : Minimal no of characters that needs to be entered before typeahead kicks-in</p></li>
                    <li><p><code>typeahead-on-select($item, $model, $label)</code><em>(Defaults: null)</em> : A callback executed when a match is selected</p></li>
                    <li><p><code>typeahead-template-url</code> <i class="glyphicon glyphicon-eye-open"></i> : Set custom item template</p></li>
                    <li><p><code>typeahead-wait-ms</code> <i class="glyphicon glyphicon-eye-open"></i><em>(Defaults: 0)</em> : Minimal wait time after last character typed before typeahead kicks-in</p></li>
                    <li><p><code>typeahead-focus-first</code><em>(Defaults: true)</em> : Should the first match automatically be focused as you type?</p></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Typeahead -->
			</div>
		</div>
	</div>
</div>
<!-- -End Page -->
