<div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel-heading">
      <h4 class="panel-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="panel-collapse collapse" uib-collapse="!isOpen">
      <div class="panel-body" style="text-align: right" ng-transclude></div>
    </div>
  </script>

  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</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="panel-default" 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="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </div>
    <div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
      <p>The body of the uib-accordion group grows to fit the contents</p>
      <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
      <div ng-repeat="item in items">{{item}}</div>
    </div>
    <div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">
      Hello
    </div>
    <div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
      <uib-accordion-heading>
        Custom template with custom header template <i class="pull-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="panel-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="panel-default" is-open="status.open">
      <uib-accordion-heading>
        I can have markup, too! <i class="pull-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
  };
});
			

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=""></uib-accordion-group>.

<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-default' 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);
  };
});

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="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-default" ng-click="uncheckable = !uncheckable">
            Toggle uncheckable
        </button>
    </div>
</div>

app.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);
      }
    });
  });
});

          .btn-primary {
  color: #fff;
  background-color: #ee6023;
  border-color: #c54008;
  background-image: linear-gradient(to bottom, #ee6023 0%, #dc4e11 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee6023', endColorstr='#ffdc4e11', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #ce4910;
  border-color: #8a2d06;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #ee6023;
  border-color: #c54008;
}
.btn-primary .badge {
  color: #ee6023;
  background-color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #ce4910;
  border-color: #c54008;
  background-image: linear-gradient(to bottom, #ea5312 0%, #bb420e 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffea5312', endColorstr='#ffbb420e', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

.btn-info {
  color: #fff;
  background-color: #f5a482;
  border-color: #f5a482;
  background-image: linear-gradient(to bottom, #f5a482 0%, #f38c61 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5a482', endColorstr='#fff38c61', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  color: #fff;
  background-color: #f28252;
  border-color: #f17b49;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: #f5a482;
  border-color: #f5a482;
}
.btn-info .badge {
  color: #f5a482;
  background-color: #fff;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  color: #fff;
  background-color: #f28252;
  border-color: #f5a482;
  background-image: linear-gradient(to bottom, #f4976f 0%, #f0753f 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff4976f', endColorstr='#fff0753f', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: #f5a482;
  border-color: #f5a482;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

          
          

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.

 <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-default" role="navigation">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">A menu</a>
		</div>
		<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
			<ul class="nav navbar-nav">
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
			</ul>
		</div>
	</nav>
	<hr>
	<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse Vertically</button>
	<hr>
	<div uib-collapse="isCollapsed">
		<div class="well well-lg">Some content</div>
	</div>

	<button type="button" class="btn btn-default" ng-click="isCollapsedHorizontal = !isCollapsedHorizontal">Toggle collapse Horizontally</button>
	<hr>
	<div class="horizontal-collapse" uib-collapse="isCollapsedHorizontal" horizontal>
		<div class="well well-lg">Some content</div>
	</div>
</div>
             

 app.controller('CollapseDemoCtrl', function ($scope) {
  $scope.isNavCollapsed = true;
  $scope.isCollapsed = false;
  $scope.isCollapsedHorizontal = false;
});
            

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, keep in mind that due to how CSS can reflow as the collapse element goes from 0px to its desired end width, this cause result in issues with a changing height. 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.

<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="" ng-model="date" />
  </p>
</div>

app.controller('DateParserDemoCtrl', function ($scope, uibDateParser) {
  $scope.format = 'yyyy/MM/dd';
  $scope.date = new Date();
});

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

Add bootstrap-datepicker as a dependency in bower.json, .

"bootstrap-datepicker": "1.3.1"

Then run:

bower install

In src/main/webapp/index.html, add links to the CSS and JS files:

<head>
    ...
    <link rel="stylesheet" src="bower_components/bootstrap-datepicker/css/datepicker.css">
    ...
</head>

<script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

Example:

<div class="form-group">
        <label for="birthdate">Birth Date</label>
        <input type="text" class="form-control" name="birthdate" data-provide="datepicker">
    </div>

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

    <!-- Single button -->
    <div class="btn-group" 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>
      <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>

    <!-- Split button -->
    <div class="btn-group" 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>
      <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-button">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>

    <!-- Single button using append-to-body -->
    <div class="btn-group" 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>
      <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>

    <!-- Single button using template-url -->
    <div class="btn-group" 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>
      <ul class="dropdown-menu" uib-dropdown-menu template-url="dropdown.html" aria-labelledby="button-template-url">
      </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>

    <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>
        <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
            <li role="menuitem"><a href="#">Action</a></li>
            <li role="menuitem"><a href="#">Another action</a></li>
            <li role="menuitem"><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li role="menuitem"><a href="#">Separated link</a></li>
        </ul>
    </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>
            <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to">
              <li role="menuitem"><a href="#">Action</a></li>
              <li role="menuitem"><a href="#">Another action</a></li>
              <li role="menuitem"><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li role="menuitem"><a href="#">Separated link</a></li>
            </ul>
          </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>
            <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body">
              <li role="menuitem"><a href="#">Action</a></li>
              <li role="menuitem"><a href="#">Another action</a></li>
              <li role="menuitem"><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li role="menuitem"><a href="#">Separated link</a></li>
            </ul>
          </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>
            <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-single-button">
              <li role="menuitem"><a href="#">Action</a></li>
              <li role="menuitem"><a href="#">Another action</a></li>
              <li role="menuitem"><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li role="menuitem"><a href="#">Separated link</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <script type="text/ng-template" id="dropdown.html">
        <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="button-template-url">
          <li role="menuitem"><a href="#">Action in Template</a></li>
          <li role="menuitem"><a href="#">Another action in Template</a></li>
          <li role="menuitem"><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li role="menuitem"><a href="#">Separated link in Template</a></li>
        </ul>
    </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'));
});

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.

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

Usage

Wrap the table in a element that will scroll vertically. Use the fix-head attribute on a <thead> element to prevent it from scrolling with the rest of the table.

A clone of the original <thead> element will be moved outside the scroll container. To ensure valid HTML, the cloned <thead> element will be wrapped in a copy of the <table> element. The new <table> element will be given the clone class.

<div style="overflow: auto; max-height: 300px;">
  <table>
    <thead fix-head>
      <tr>
        <th>Nr</th>
        <th>Name</th>
        <th>Birthday</th>
        <th>Citizenship</th>
        <th>Favorite Food and Drink</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="contact in contacts">
        <td>{{contact.nr}}</td>
        <td>{{contact.name}}</td>
        <td>{{contact.birthday}}</td>
        <td>{{contact.citizenship}}</td>
        <td>{{contact.favoritefood}}</td>
      </tr>
    </tbody>
  </table>
</div>

This package is installable through the Bower package manager.

bower install angular-fixed-table-header --save

Using Bower

In your index.html file, include the source file.

<script type="text/javascript" src="bower_components/angular-fixed-table-header/src/fixed-table-header.min.js"></script>

Include the fixed.table.header module as a dependency in your application.

angular.module('myApp', ['fixed.table.header']);

Using npm and Browserify (or JSPM)

In addition, this package may be installed using npm.

npm install angular-fixed-table-header --save

You may use Browserify to inject this module into your application.

angular.module('myApp', [require('angular-fixed-table-header')]);

<table ng-table="usersTable" class="table table-condensed table-bordered table-hover">
        <colgroup>
          <col width="60%" />
          <col width="20%" />
          <col width="20%" />
        </colgroup>
        <tr class="ng-table-group" ng-repeat-start="group in $groups">
          <td colspan="3">
            <a href="" ng-click="group.$hideRows = !group.$hideRows">
              <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
              <strong>{{ group.value }}</strong>
            </a>
          </td>
        </tr>
        <tr ng-hide="group.$hideRows" ng-repeat="user in group.data" ng-repeat-end>
          <td sortable="'country'" data-title="'Country'" groupable="'country'" ng-if="false">
            {{user.country}}
          </td>
          <td sortable="'name'" data-title="'Name'" groupable="'name'">
            {{user.name}}
          </td>
          <td sortable="'age'" data-title="'Age'" groupable="'age'">
            {{user.age}}
          </td>
          <td sortable="'money'" data-title="'Money'">
            {{user.money}}
          </td>
        </tr>
      </table>

angular.module('mineralbay').controller('tableController', ['$scope','$http', 'NgTableParams', function ($scope, $http, NgTableParams) {
	  
	 $scope.users = [{"name":"Karen","age":45,"money":798,"country":"Czech Republic"},
	 		{"name":"Cat","age":49,"money":749,"country":"Czech Republic"},
	 		{"name":"Bismark","age":48,"money":672,"country":"Denmark"},
	 		{"name":"Markus","age":41,"money":695,"country":"Costa Rica"},
	 		{"name":"Anthony","age":45,"money":559,"country":"Japan"},
	 		{"name":"Alex","age":55,"money":645,"country":"Czech Republic"},
	 		{"name":"Stephane","age":57,"money":662,"country":"Japan"},
	 		{"name":"Alex","age":59,"money":523,"country":"American Samoa"},
	 		{"name":"Tony","age":56,"money":540,"country":"Canada"},
	 		{"name":"Cat","age":57,"money":746,"country":"China"},
	 		{"name":"Christian","age":59,"money":572,"country":"Canada"},
	 		{"name":"Tony","age":60,"money":649,"country":"Japan"},
	 		{"name":"Cat","age":47,"money":675,"country":"Denmark"},
	 		{"name":"Stephane","age":50,"money":674,"country":"China"},
	 		{"name":"Markus","age":40,"money":549,"country":"Portugal"},
	 		{"name":"Anthony","age":53,"money":660,"country":"Bahamas"},
	 		{"name":"Stephane","age":54,"money":549,"country":"China"},
	 		{"name":"Karen","age":50,"money":611,"country":"American Samoa"},
	 		{"name":"Therese","age":53,"money":754,"country":"China"},
	 		{"name":"Bismark","age":49,"money":791,"country":"Canada"},
	 		{"name":"Daraek","age":56,"money":640,"country":"Costa Rica"},
	 		{"name":"Tony","age":43,"money":674,"country":"Canada"},
	 		{"name":"Karen","age":47,"money":700,"country":"Portugal"},
	 		{"name":"Therese","age":47,"money":718,"country":"Czech Republic"},
	 		{"name":"Karen","age":50,"money":655,"country":"Japan"},
	 		{"name":"Daraek","age":59,"money":581,"country":"American Samoa"},
	 		{"name":"Daraek","age":60,"money":595,"country":"Portugal"},
	 		{"name":"Markus","age":44,"money":607,"country":"China"},
	 		{"name":"Simon","age":58,"money":728,"country":"Japan"},
	 		{"name":"Simon","age":49,"money":655,"country":"Bahamas"}];
            
    $scope.usersTable = new NgTableParams({
					// initial grouping
					group: {
						country: "desc"
					}
				}, {
					dataset: $scope.users,
					groupOptions: {
						isExpanded: true
					}
				});               
                
}]);

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

app.controller('PagerDemoCtrl', function($scope) {
  $scope.totalItems = 64;
  $scope.currentPage = 4;
});

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.

 <h4>Default</h4>
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></ul></br>
<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></br>
<ul uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></ul></br>
<ul uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></ul>
<pre>The selected page no: <span ng-bind="currentPage"></span></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:<span ng-bind="bigCurrentPage"></span> / <span ng-bind="numPages"></span></pre>
             

app.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;
});

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  background-color: #ee6023;
  border-color: #ee6023;
  cursor: default;
}
          

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="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-default">Dynamic Popover</button>

    <button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">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-default">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-default">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-default">fading</button>
    <button uib-popover="I have a title!" popover-title="The title." type="button" class="btn btn-default">title</button>
    <button uib-popover="I am activated manually" popover-is-open="popoverIsOpen" ng-click="popoverIsOpen = !popoverIsOpen" type="button" class="btn btn-default">Toggle popover</button>
    <button uib-popover-html="htmlPopover" class="btn btn-default">HTML Popover</button>
    <button uib-popover-html="'<b>HTML</b>, <i>inline</i>'" class="btn btn-default">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');
});

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-default">
  Click Me
</a>

<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 class="progress-striped" value="22" type="warning">22%</uib-progressbar></div>
        <div class="col-sm-4"><uib-progressbar class="progress-striped active" max="200" value="166" type="danger"><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="progress-striped active" value="dynamic" type="{{type}}">{{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('mineralbay').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();
});

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

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

             <h4>Simple slider</h4>
            <rzslider rz-slider-model="slider.value"></rzslider>
            
            <h4>Range slider with min limit set to 10 and max limit set to 90</h4>
            <rzslider rz-slider-model="rangeSlider.minValue"
          rz-slider-high="rangeSlider.maxValue"
          rz-slider-options="rangeSlider.options"></rzslider>

			<h4>Range slider with a minimal range set to 10 and maximum of 50</h4>
			<rzslider rz-slider-model="rangeMinMaxSlider.minValue"
          rz-slider-high="rangeMinMaxSlider.maxValue"
          rz-slider-options="rangeMinMaxSlider.options"></rzslider>
          
          
          <h4> Range slider with noSwitching=true</h4>
          <rzslider rz-slider-model="rangeNoSwitchingSlider.minValue"
          rz-slider-high="rangeNoSwitchingSlider.maxValue"
          rz-slider-options="rangeNoSwitchingSlider.options"></rzslider>
          
          <h4>Range slider with minimum range of 10, maximum of 30 and pushRange option</h4>
          <rzslider rz-slider-model="rangePushRangeSlider.minValue"
          rz-slider-high="rangePushRangeSlider.maxValue"
          rz-slider-options="rangePushRangeSlider.options"></rzslider>
          
          <h4>Slider with visible selection bar</h4>
          <rzslider rz-slider-model="selectionBarSlider.value"
          rz-slider-options="selectionBarSlider.options"></rzslider>
          
          <h4>Slider with visible selection bar from a value</h4>
          <rzslider rz-slider-model="selectionBarFromAValueSlider.value"
          rz-slider-options="selectionBarFromAValueSlider.options"></rzslider>
          
          <h4>Slider with selection bar gradient</h4>
          <rzslider rz-slider-model="selectionBarWithGradientSlider.minValue"
          rz-slider-high="selectionBarWithGradientSlidermaxValue"
          rz-slider-options="selectionBarWithGradientSlider.options"></rzslider>
          
          <h4>Slider with custom display function</h4>
          <rzslider rz-slider-model="customDisplaySlider.minValue"
          rz-slider-high="customDisplaySlider.maxValue"
          rz-slider-options="customDisplaySlider.options"></rzslider>
          
          <h4>Slider with custom display function using HTML formatting</h4>
          <rzslider rz-slider-model="customDisplayUsingHTMLSlider.minValue"
          rz-slider-high="customDisplayUsingHTMLSlider.maxValue"
          rz-slider-options="customDisplayUsingHTMLSlider.options"></rzslider>       
         
          <h4>Slider with ticks</h4>
          <rzslider rz-slider-model="ticksSlider.value"
          rz-slider-options="ticksSlider.options"></rzslider>
          
          <h4>Slider with ticks at intermediate positions</h4>
          <rzslider rz-slider-model="ticksIntermediateSlider.value"
          rz-slider-options="ticksIntermediateSlider.options"></rzslider>
          
          <h4>Slider with ticks at specific positions</h4>
          <rzslider rz-slider-model="ticksSpecificSlider.value"
          rz-slider-options="ticksSpecificSlider.options"></rzslider>
          
          <h4>Slider with ticks values, legend and tooltips</h4>
          <rzslider rz-slider-model="ticksAndLegendsAndTooltipsSlider.value"
          rz-slider-options="ticksAndLegendsAndTooltipsSlider.options"></rzslider>
          
          

          <h4 style="padding-top:50px">Slider with draggable range</h4>
          <rzslider rz-slider-model="draggableRangeSlider.minValue"
          rz-slider-high="draggableRangeSlider.maxValue"
          rz-slider-options="draggableRangeSlider.options"></rzslider>
          
          <h4>Slider with draggable range only</h4>
          <rzslider rz-slider-model="draggableRangeOnlySlider.minValue"
          rz-slider-high="draggableRangeOnlySlider.maxValue"
          rz-slider-options="draggableRangeOnlySlider.options"></rzslider>
          
          <h4>Vertical sliders</h4>
          <p style="height: 400px;width:600px;">
          <rzslider style="padding-right:30px;" rz-slider-model="verticalSlider1.value"
          rz-slider-options="verticalSlider1.options"></rzslider>

		<rzslider style="padding-right:30px;" rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue"
          rz-slider-options="verticalSlider2.options"></rzslider>

		<rzslider style="padding-right:30px;" rz-slider-model="verticalSlider3.value"
          rz-slider-options="verticalSlider3.options"></rzslider>

		<rzslider style="padding-right:30px;" rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue"
          rz-slider-options="verticalSlider4.options"></rzslider>

		<rzslider style="padding-right:30px;" rz-slider-model="verticalSlider5.value"
          rz-slider-options="verticalSlider5.options"></rzslider>

		<rzslider style="padding-right:30px;" rz-slider-model="verticalSlider6.value"
          rz-slider-options="verticalSlider6.options"></rzslider>
          
          </p>
          <h4>Read-only slider</h4>
          
          <label>Read-only <input type="checkbox" ng-model="readOnlySlider.options.readOnly"></label>
<rzslider rz-slider-model="readOnlySlider.value"
          rz-slider-options="readOnlySlider.options"></rzslider>
          
             

$scope.slider = {
    value: 10
};

$scope.rangeSlider = {
    minValue: 10,
    maxValue: 90,
    options: {
        floor: 0,
        ceil: 100,
        step: 1,
        minLimit: 10,
      	maxLimit: 90
    }
};

$scope.rangeMinMaxSlider = {
    minValue: 10,
    maxValue: 90,
    options: {
        floor: 0,
        ceil: 100,
        step: 1,
        minRange: 10,
        maxRange: 50
    }
};

$scope.rangeNoSwitchingSlider = {
    minValue: 10,
    maxValue: 90,
    options: {
        floor: 0,
        ceil: 100,
        step: 1,
        noSwitching: true
    }
};

$scope.rangePushRangeSlider = {
    minValue: 60,
    maxValue: 60,
    options: {
        floor: 0,
        ceil: 100,
        step: 1,
        minRange: 10,
        maxRange: 30,
        pushRange: true
    }
};

$scope.selectionBarSlider = {
    value: 10,
    options: {
        showSelectionBar: true
    }
};

$scope.selectionBarFromAValueSlider = {
  value: 5,
  options: {
    floor: -10,
    ceil: 10,
    showSelectionBarFromValue: 0
  }
};

$scope.selectionBarWithGradientSlider = {
  minValue: 0,
  maxValue: 80,
  options: {
    ceil: 100,
    showSelectionBar: true,
    selectionBarGradient: {
      from: 'white',
      to: '#FC0'
    }
  }
};

$scope.customDisplaySlider = {
  minValue: 100,
  maxValue: 400,
  options: {
    floor: 0,
    ceil: 500,
    translate: function(value) {
      return '$' + value;
    }
  }
};

$scope.customDisplayUsingHTMLSlider = {
  minValue: 100,
  maxValue: 400,
  options: {
    floor: 0,
    ceil: 500,
    translate: function(value, sliderId, label) {
      switch (label) {
        case 'model':
          return '<b>Min price:</b> $' + value;
        case 'high':
          return '<b>Max price:</b> $' + value;
        default:
          return '$' + value
      }
    }
  }
};

$scope.ticksSlider = {
  value: 5,
  options: {
    floor: 0,
    ceil: 10,
    showTicks: true
  }
};

$scope.ticksIntermediateSlider = {
  value: 55,
  options: {
    floor: 0,
    ceil: 100,
    showTicks: 10
  }
};

$scope.ticksSpecificSlider = {
  value: 55,
  options: {
    floor: 0,
    ceil: 100,
    ticksArray: [0, 10, 25, 50, 100]
  }
};

$scope.ticksAndLegendsAndTooltipsSlider = {
  value: 5,
  options: {
    showTicksValues: true,
    ticksTooltip: function(v) {
      return 'Tooltip for ' + v;
    },
    stepsArray: [
      {value: 1, legend: 'Very poor'},
      {value: 2},
      {value: 3, legend: 'Fair'},
      {value: 4},
      {value: 5, legend: 'Average'},
      {value: 6},
      {value: 7, legend: 'Good'},
      {value: 8},
      {value: 9, legend: 'Excellent'}
    ]
  }
};

$scope.draggableRangeSlider = {
  minValue: 1,
  maxValue: 8,
  options: {
    floor: 0,
    ceil: 10,
    draggableRange: true
  }
};

$scope.draggableRangeOnlySlider = {
  minValue: 4,
  maxValue: 6,
  options: {
    floor: 0,
    ceil: 10,
    draggableRangeOnly: true
  }
};

$scope.verticalSlider1 = {
  value: 0,
  options: {
    floor: 0,
    ceil: 10,
    vertical: true
  }
};
$scope.verticalSlider2 = {
  minValue: 20,
  maxValue: 80,
  options: {
    floor: 0,
    ceil: 100,
    vertical: true
  }
};
$scope.verticalSlider3 = {
  value: 5,
  options: {
    floor: 0,
    ceil: 10,
    vertical: true,
    showTicks: true
  }
};
$scope.verticalSlider4 = {
  minValue: 1,
  maxValue: 5,
  options: {
    floor: 0,
    ceil: 6,
    vertical: true,
    showTicksValues: true
  }
};
$scope.verticalSlider5 = {
  value: 50,
  options: {
    floor: 0,
    ceil: 100,
    vertical: true,
    showSelectionBar: true
  }
};
$scope.verticalSlider6 = {
  value: 6,
  options: {
    floor: 0,
    ceil: 6,
    vertical: true,
    showSelectionBar: true,
    showTicksValues: true,
    ticksValuesTooltip: function (v) {
      return 'Tooltip for ' + v;
    }
  }
};

$scope.readOnlySlider = {
  value: 50,
  options: {
    floor: 0,
    ceil: 100,
    readOnly: true
  }
};

.rzslider {
  display: inline-block;
  position: relative;
  height: 4px;
  width: 100%;
  margin: 35px 0 15px 0;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.rzslider.with-legend {
  margin-bottom: 40px;
}
.rzslider[disabled] {
  cursor: not-allowed;
}
.rzslider[disabled] .rz-pointer {
  cursor: not-allowed;
  background-color: #d8e0f3;
}
.rzslider[disabled] .rz-draggable {
  cursor: not-allowed;
}
.rzslider[disabled] .rz-selection {
  background: #8b91a2;
}
.rzslider[disabled] .rz-tick {
  cursor: not-allowed;
}
.rzslider[disabled] .rz-tick.rz-selected {
  background: #8b91a2;
}
.rzslider span {
  white-space: nowrap;
  position: absolute;
  display: inline-block;
}
.rzslider .rz-base {
  width: 100%;
  height: 100%;
  padding: 0;
}
.rzslider .rz-bar-wrapper {
  left: 0;
  box-sizing: border-box;
  margin-top: -16px;
  padding-top: 16px;
  width: 100%;
  height: 32px;
  z-index: 1;
}
.rzslider .rz-draggable {
  cursor: move;
}
.rzslider .rz-bar {
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 1;
  background: #d8e0f3;
  border-radius: 2px;
}
.rzslider .rz-bar-wrapper.rz-transparent .rz-bar {
  background: transparent;
}
.rzslider .rz-bar-wrapper.rz-left-out-selection .rz-bar {
  background: #df002d;
}
.rzslider .rz-bar-wrapper.rz-right-out-selection .rz-bar {
  background: #03a688;
}
.rzslider .rz-selection {
  z-index: 2;
  background: #ee6023;
  border-radius: 2px;
}
.rzslider .rz-pointer {
  cursor: pointer;
  width: 32px;
  height: 32px;
  top: -14px;
  background-color: #ee6023;
  z-index: 3;
  border-radius: 16px;
}
.rzslider .rz-pointer:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  top: 12px;
  left: 12px;
  border-radius: 4px;
  background: #fff;
}
.rzslider .rz-pointer:hover:after {
  background-color: #fff;
}
.rzslider .rz-pointer.rz-active {
  z-index: 4;
}
.rzslider .rz-pointer.rz-active:after {
  background-color: #b20001;
}
.rzslider .rz-bubble {
  cursor: default;
  bottom: 16px;
  padding: 1px 3px;
  color: #55637d;
}
.rzslider .rz-bubble.rz-limit {
  color: #55637d;
}
.rzslider .rz-ticks {
  box-sizing: border-box;
  width: 100%;
  height: 0;
  position: absolute;
  left: 0;
  top: -3px;
  margin: 0;
  z-index: 1;
  list-style: none;
}
.rzslider .rz-ticks-values-under .rz-tick-value {
  top: auto;
  bottom: -32px;
}
.rzslider .rz-tick {
  text-align: center;
  cursor: pointer;
  width: 10px;
  height: 10px;
  background: #d8e0f3;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 11px;
}
.rzslider .rz-tick.rz-selected {
  background: #ee6023;
}
.rzslider .rz-tick-value {
  position: absolute;
  top: -30px;
  transform: translate(-50%, 0);
}
.rzslider .rz-tick-legend {
  position: absolute;
  top: 24px;
  transform: translate(-50%, 0);
  max-width: 50px;
  white-space: normal;
}
.rzslider.rz-vertical {
  position: relative;
  width: 4px;
  height: 100%;
  margin: 0 20px;
  padding: 0;
  vertical-align: baseline;
}
.rzslider.rz-vertical .rz-base {
  width: 100%;
  height: 100%;
  padding: 0;
}
.rzslider.rz-vertical .rz-bar-wrapper {
  top: auto;
  left: 0;
  margin: 0 0 0 -16px;
  padding: 0 0 0 16px;
  height: 100%;
  width: 32px;
}
.rzslider.rz-vertical .rz-bar {
  bottom: 0;
  left: auto;
  width: 4px;
  height: 100%;
}
.rzslider.rz-vertical .rz-pointer {
  left: -14px !important;
  top: auto;
  bottom: 0;
}
.rzslider.rz-vertical .rz-bubble {
  left: 16px !important;
  margin-left: 3px;
  bottom: 0;
}
.rzslider.rz-vertical .rz-ticks {
  height: 100%;
  width: 0;
  left: -3px;
  top: 0;
  z-index: 1;
}
.rzslider.rz-vertical .rz-tick {
  vertical-align: middle;
  margin-left: auto;
  margin-top: 11px;
}
.rzslider.rz-vertical .rz-tick-value {
  left: 24px;
  top: auto;
  transform: translate(0, -28%);
}
.rzslider.rz-vertical .rz-tick-legend {
  top: auto;
  right: 24px;
  transform: translate(0, -28%);
  max-width: none;
  white-space: nowrap;
}
.rzslider.rz-vertical .rz-ticks-values-under .rz-tick-value {
  bottom: auto;
  left: auto;
  right: 24px;
}
          
          
          

<div class="table-responsive">
<table class="table table-condensed table-bordered table-striped">
		<thead>
			<tr>
                <th>
                    <sort column-name="mineralbayApp.xy.name" data-uib-tooltip="Sort by name" sort-callback="loadAll()"
                          order-type="name" order-model="orderModel"></sort>
                </th>
			<tr>
		</thead>
		<tbody>
			<tr ng-repeat="xy in xys">
        	        <td>{{tunnelProject.projectName}}</td>
				
			</tr>
		</tbody>
	</table>
</div>

----------------------------------------------------------------------------------------

sort.template.html: 
<div class="breakNotAllowed" ng-click="sort()">
    	<span translate="{{columnName}}" class="breakAllowed">Name</span>
        <span class="glyphicon"
              ng-class="(orderType == orderModel.order_type && orderModel.order_direction=='DESC') ? 'glyphicon-arrow-up' : (orderType == orderModel.order_type && orderModel.order_direction == 'ASC' ?'glyphicon-arrow-down' : true)"></span>
</div>
             

.table {
	font-size: 13px;
	table-layout: fixed;
}

.table > thead > tr > th > sort {
	text-align: center;
}

.table > thead > tr > th > sort:hover {
	background: #C5E3EA;
	color: #23527c;
	cursor: pointer;
	text-align: center;
}

.table > thead > tr > th,
.table > thead > tr > td {
  background-color:rgba(141, 192, 219, 0.25);
}

.table > thead > tr > th:hover{
   background-color: #C5E3EA;
	color: #23527c;

}

<p>Select a tab by setting active binding to true:</p>
  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select second tab</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select third tab</button>
  </p>
  <p>
    <button type="button" class="btn btn-default 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="glyphicon glyphicon-bell"></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="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 />

  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>

app.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
  };
});

.nav-tabs {
  margin-bottom: 10px;
}

.nav-tabs > li > a {
  border-radius: 0;
  color: #337ab7;
  cursor: pointer;
  margin-right: -1px;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  box-shadow: none;
  background-color: #fefefe;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-top-color: #ee6023;
}

.nav-tabs > li.active > a:after,
.nav-tabs > li.active > a:hover:after,
.nav-tabs > li.active > a:focus:after {
  content: "";
  height: 2px;
  left: -1px;
  position: absolute;
  right: -1px;
  top: 0;
  background-color: #ee6023;
}

.nav-tabs > li.open > a,
.nav-tabs > li.open > a:hover,
.nav-tabs > li.open > a:focus {
  background-color: #fefefe;
  border-color: #cccccc;
}

.nav-tabs.nav-justified > li > a {
  border-bottom: 1px solid #cccccc;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: -1px;
  border-radius: 0;
}

.nav-tabs.nav-justified > li:first-child > a {
  margin-left: 0;
}

.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border-top-color: #ee6023;
  border-bottom-color: #ffffff;
}

.nav-tabs > li.active > a:focus {
  color: #ee6023;
}
    			
    		

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.

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

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

app.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;
  };
});

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="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-default">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>

app.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'
  };
});

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-default">
  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.

 <wizard on-finish="finishedWizard()" on-cancel="cancelledWizard()"> 
    <wz-step wz-title="Starting">
        <h1>This is the first step</h1>
        <p>Here you can use whatever you want. You can use other directives, binding, etc.</p>
        <input type="submit" wz-next value="Continue" />
    </wz-step>
    <wz-step wz-title="Continuing">
        <h1>Continuing</h1>
        <p>You have continued here!</p>
        <input type="submit" wz-next value="Go on" />
    </wz-step>
    <wz-step wz-title="More steps">
        <p>Even more steps!!</p>
        <input type="submit" wz-next value="Finish now" />
    </wz-step>
</wizard>

.steps-indicator {
  /* ---- steps quantity ---- */
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 20px 0 0 0;
  height: 30px;
  list-style: none;
}
.steps-indicator:before {
  background-color: #E6E6E6;
  content: '';
  position: absolute;
  height: 1px;
}
.steps-indicator.steps-2:before {
  left: calc(100% / 2 / 2);
  right: calc(100% / 2 / 2);
}
.steps-indicator.steps-3:before {
  left: calc(100% / 3 / 2);
  right: calc(100% / 3 / 2);
}
.steps-indicator.steps-4:before {
  left: calc(100% / 4 / 2);
  right: calc(100% / 4 / 2);
}
.steps-indicator.steps-5:before {
  left: calc(100% / 5 / 2);
  right: calc(100% / 5 / 2);
}
.steps-indicator.steps-6:before {
  left: calc(100% / 6 / 2);
  right: calc(100% / 6 / 2);
}
.steps-indicator.steps-7:before {
  left: calc(100% / 7 / 2);
  right: calc(100% / 7 / 2);
}
.steps-indicator.steps-8:before {
  left: calc(100% / 8 / 2);
  right: calc(100% / 8 / 2);
}
.steps-indicator.steps-9:before {
  left: calc(100% / 9 / 2);
  right: calc(100% / 9 / 2);
}
.steps-indicator.steps-10:before {
  left: calc(100% / 10 / 2);
  right: calc(100% / 10 / 2);
}
.steps-indicator * {
  box-sizing: border-box;
}
.steps-indicator li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  padding-top: 10px;
  text-align: center;
  line-height: 15px;
}
.steps-indicator li a {
  color: #808080;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  transition: 0.25s;
  cursor: pointer;
}
.steps-indicator li a:before {
  position: absolute;
  top: -7px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 100%;
  background-color: #E6E6E6;
  content: '';
  transition: 0.25s;
}
.steps-indicator li a:hover {
  color: #4d4d4d;
}
.steps-indicator.steps-2 li {
  width: calc(100% / 2);
}
.steps-indicator.steps-3 li {
  width: calc(100% / 3);
}
.steps-indicator.steps-4 li {
  width: calc(100% / 4);
}
.steps-indicator.steps-5 li {
  width: calc(100% / 5);
}
.steps-indicator.steps-6 li {
  width: calc(100% / 6);
}
.steps-indicator.steps-7 li {
  width: calc(100% / 7);
}
.steps-indicator.steps-8 li {
  width: calc(100% / 8);
}
.steps-indicator.steps-9 li {
  width: calc(100% / 9);
}
.steps-indicator.steps-10 li {
  width: calc(100% / 10);
}
.steps-indicator.steps-11 li {
  width: calc(100% / 11);
}
.steps-indicator li.default {
  pointer-events: none;
}
.steps-indicator li.default a:hover {
  color: #808080;
}
.steps-indicator li.current,
.steps-indicator li.editing {
  pointer-events: none;
}
.steps-indicator li.current a:before {
  background-color: #ee6023;
}
.steps-indicator li.done a:before {
  background-color: #339933;
}
.steps-indicator li.editing a:before {
  background-color: #ee6023;
}