If you're building an Angular app, you *can* use jQuery, but there is a lot of good reasons to try to avoid it in favor of more angular driven paradigms.  You can continue to use the styles provided by bootstrap, but replace the jQuery plugins with native angular by using [**UI Bootstrap**][UI Bootstrap]

Include the Boostrap CSS files, Angular.js, and ui.Bootstrap.js:



    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.angularjs.org/1.2.20/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

Make sure you've injected `ui.bootstrap` when you create your module like this:



    var app = angular.module('plunker', ['ui.bootstrap']);

Then you can use angular directives instead of data attributes picked up by jQuery:



<pre><code>&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; 
        <del>title=&quot;Tooltip on left&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;left&quot;</del>
        <b>tooltip=&quot;Tooltip on left&quot; tooltip-placement=&quot;left&quot; &gt;</b>
  Tooltip on left
&lt;/button&gt;
</code></pre>

### [Demo in Plunker][plunker]

------

## Avoiding UI Bootstrap

[jQuery.min.js (94kb)][jQuery.min.js] + [Bootstrap.min.js (32kb)][Bootstrap.min.js] is also giving you more than you need, and much more than [ui-bootstrap.min.js (41kb)][ui-bootstrap.min.js].

And time spent downloading the modules is only one aspect of performance. 

If you really wanted to only load the modules you needed, you can "Create a Build" and choose tooltips from the [Bootstrap-UI website][UI Bootstrap].  Or you can explore the [source code for tooltips][tooltips src] and pick out what you need.

Here a minified custom build with just the [tooltips and templates (6kb)][custom]



[UI Bootstrap]: http://angular-ui.github.io/bootstrap/

[plunker]: http://plnkr.co/edit/ikSvWpdNDYg30OGdyHzL?p=preview
[tooltips src]: https://github.com/angular-ui/bootstrap/tree/master/src/tooltip

[jQuery.min.js]: http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
[Bootstrap.min.js]: http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js
[ui-bootstrap.min.js]: http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.min.js

[custom]: http://embed.plnkr.co/ikSvWpdNDYg30OGdyHzL/ui-bootstrap-custom-tpls-0.10.0.js

I am trying to use the Bootstrap tooltip in an app of mine. My app is using AngularJS Currently, I have the following:

    <button type="button" class="btn btn-default" 
            data-toggle="tooltip" data-placement="left"
            title="Tooltip on left">
                Tooltip on left
    </button>

I think I need to use 

    $("[data-toggle=tooltip]").tooltip();

However, I'm not sure. Even when I add the line above though, my code doesn't work. I'm trying to avoid using UI bootstrap as it has more than I need. However, if I had to include just the tooltip piece, I'd be open to that. Yet, I can't figure out how to do that. 

Can someone show me how to get the Bootstrap Tooltip working with AngularJS?

Using Bootstrap Tooltip with AngularJS

This is a *bug* in most browsers (IE appears fine) where the elements are fixed to the `iframe`, not the window. Typically, if you need something to be relative to the main document, it has to be in the main document. 

A workaround is to wrap your iframe in a fixed position div that takes up the whole width of the screen and then maximize the iframe within that.  This appears to resolve the issue

**HTML**:



    <div class="fixframe">
        <iframe src="http://getbootstrap.com/javascript/"></iframe>
    </div>

**CSS**:
    


    .fixframe {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;    
    } 
    .fixframe iframe {
       height: 100%;
       width: 100%;  
    } 


## [Working Demo in fiddle][fiddle]


**See Also**:

* [position:fixed inside of an iframe][SO1]
* [iframe with a css fixed position : possible?][SO2]
* [position fixed div in iframe not working][SO3]

[fiddle]: http://jsfiddle.net/KyleMit/SKhQY/show/

[SO1]: https://stackoverflow.com/q/8304148/1366033
[SO2]: https://stackoverflow.com/q/4195971/1366033
[SO3]: https://stackoverflow.com/q/7609062/1366033

When embedding a Bootstrap app in an iframe, modal dialogs always open at the top of the iframe, not the top of the screen. As an example, go to http://getbootstrap.com/javascript/ and open an example modal on the page. Then using the sample code below which places the same bootstrap page in an iframe, find a modal and open it:

    <html>
        <head>
        </head>
        <body>
            <table width="100%">
                <tr><td colspan="2" style="height:80px;background-color:red;vertical-align:top">Here's some header content I don't control</td></tr>
                <tr><td style="width:230px;height:10080px;background-color:red;vertical-align:top">Here's some sidebar content I don't control either</td>
                    <td valign="top">
                        <iframe width="100%" height="10000px" 
                            scrolling="no" src="http://getbootstrap.com/javascript/">
                        </iframe>
                    </td>
                </tr>
            </table>
        </body>
    </html>

[Demo in fiddle](http://jsfiddle.net/uAqnU/3/show/)


How do I go about positioning the modal on the screen in this scenario? 

**UPDATE:** Unfortunately, my iFrame cannot fill the screen, nor can I make it fixed since it needs to blend into the rest of the page and the page itself has enough content to scroll. This is not my design and I ultimately intend to rework the whole thing, but this is what I have to work around for now. As a temporary option, I'm using javascript to tell the iframe parent to scroll to the top where the modal dialog pops up. While this is acceptable, this isn't the desired behavior.

I'm using angularjs and the ui-bootstrap library in my code but as you can see above, it's a bootstrap issue.

Bootstrap modal at top of iframe regardless of scroll position. How do I position it on screen?

While [Krzysztof's suggestion][Krzysztof] was helpful, I couldn't quite get the binding to work with `ng-list` because the `ng-list` will always convert the array of objects into an  array of strings, thus overriding any objects I had on scope.

In this case, the simplest thing to do was to upgrade from ng-list to something with full object support like most tagging libraries:

* [ngTagsInput][ngTagsInput]
* [angular-tags][angular-tags]
* [bootstrap-tagsinput][bootstrap-tagsinput]

I Implemented ngTagsInput like this:

**HTML**:



    <tags-input ng-model="arrayObjects" display-property="text"></tags-input>

**JavaScript**:



    $scope.arrayObjects = [
      { "text": "one"   , "selected": false },
      { "text": "two"   , "selected": false },
      { "text": "three" , "selected": false }
    ];

This way each object is given it's own element where the text property is displayed and they are all formatted together to live inside of an input.  Changing one object just updates that single element

### [Demo in Pluner][plunk]



[Krzysztof]: https://stackoverflow.com/a/24966775/1366033

[angular-tags]: http://decipherinc.github.io/angular-tags/

[ngTagsInput]: http://mbenford.github.io/ngTagsInput/
[bootstrap-tagsinput]: http://timschlechter.github.io/bootstrap-tagsinput/examples/#angular

[plunk]: http://plnkr.co/edit/ruzBkQWeYaYtRhxDRyqg?p=preview

How can I convert between a delimited string and an array of **objects** with data binding? 

[`ng-list`][ng-list] will work with an array of strings.  But I have an array of objects, in which I would like to delimit the text property so the text in the array can be editable.

**Works with Array of Strings**:



    $scope.arrayStrings = ["one", "two", "three"];



    <textarea ng-model="arrayStrings" ng-list="&#10;" ></textarea>

**How can I get this to work with objects**:



    $scope.arrayObjects = [{
      text: "one",
      selected: true
    }, {
      text: "two",
      selected: true
    }, {
      text: "three",
      selected: true
    }];



    <textarea ng-model="arrayObjects" ng-list="&#10; | text" ></textarea>

### [Here's a demo in plunker][plunk 1]


---

One possible idea I had was to use ng-list on the array of strings and then map that to the array of objects.  The use a `$watch` to update the object array anytime the string array changed.  However, this still falls short because it will overwrite any other properties on the object every time the array updates. (Demo in previous plunker revision)



    $scope.$watch('arrayStrings', function() {
      $scope.arrayObjects = $scope.arrayStrings.map(function(s){
        return {
          text: s,
          selected: true
        }
      });
    })

---

### Update:

There still seem to be issues when using `ng-list` even when using [Krzysztof's suggestion][Krzysztof]:

    toString: function() { return s }

Overriding the `toString` method helps the set of objects when initially displayed, but as soon as you type anything, `ng-list` converts the set of objects back into an array of strings because at that point `toString` has not come into play. 

To clarify what I'm trying to do.  I really want a list of objects, with editable titles, that can also be selected.  I'd like to preserve selections even when the title has changed or items have been added.

### [Here's another plunker to demonstrate][plunk 2]

![screenshot][screenshot]

[ng-list]: https://docs.angularjs.org/api/ng/directive/ngList
[plunk 1]: http://plnkr.co/edit/ZudJcIak5sAWuiq3b1Hu?p=preview
[plunk 2]: http://plnkr.co/edit/0Q2jVYIU4dEc1GZ4EaPY?p=preview

[screenshot]: http://i.imgur.com/cWRGzzC.gif
[Krzysztof]: https://stackoverflow.com/a/24966775/1366033

Convert delimited string and an array of objects

There seems to be an incompatibility problem either with `ngAnimate` or `toaster` with version of angular you are using.

If you rollback angular to version `1.2.12` the errors disappear.

I would check for more current versions of both, or check github issue tracker for toaster 

**Update:** realized after I wrote this that `ngAnimate` being used is a much lower version than angular core.

<kbd>**[DEMO][1]**</kbd>

   [1]: http://plnkr.co/edit/SZTQyX958OlHNMjhS1VF?p=preview

I'm getting a weird conflict when using `ng-class` with either of the ternary operators:



    <div ng-class="{'red': showDebug, 'blue': !showDebug}" >{{showDebug}}</div>
    <div ng-class="showDebug ? 'red' : 'blue'" >{{showDebug}}</div>

Whereas both of these work fine on their own:



    <div ng-class="{'red': showDebug}" >{{showDebug}}</div>
    <div ng-class="{'blue': !showDebug}" >{{showDebug}}</div>

I get the following error message:



    TypeError: undefined is not a function
    at updateClasses (https://code.angularjs.org/1.2.20/angular.js:18307:22)
    at Object.ngClassWatchAction [as fn] (https://code.angularjs.org/1.2.20/angular.js:18318:15)
    at Scope.$get.Scope.$digest (https://code.angularjs.org/1.2.20/angular.js:12447:29)
    at Scope.$get.Scope.$apply (https://code.angularjs.org/1.2.20/angular.js:12712:24)
    at HTMLAnchorElement.<anonymous> (https://code.angularjs.org/1.2.20/angular.js:18980:21)
    at https://code.angularjs.org/1.2.20/angular.js:2823:10
    at Array.forEach (native)
    at forEach (https://code.angularjs.org/1.2.20/angular.js:325:11)
    at HTMLAnchorElement.eventHandler (https://code.angularjs.org/1.2.20/angular.js:2822:5) angular.js:9997

[**Demo in Plunker**][plunker]  
<sup>Click on the Debug link.  The debug statements above it should change color</sup>

Oddly, this appears related to how I've initialized my module and controller.  I'm using both [ui.bootstrap][ui.bootstrap] and [toaster][toaster]

**This will work, but won't bring in toaster**:



    var app = angular.module('plunker', ['ui.bootstrap']);
    app.controller('MainCtrl', function($scope) {
      $scope.showDebug = true;
    });


**This doesn't work**:



    var app = angular.module('plunker', ['ui.bootstrap', 'toaster']);
    app.controller('MainCtrl', function($scope, toaster) {
      $scope.showDebug = true;
    });

**I've also tried to inject toaster straight into the controller itself, but still doesn't resolve any conflicts**:



    var app = angular.module('plunker', ['ui.bootstrap', 'toaster']);
    app.controller('MainCtrl', ['$scope', 'toaster', function($scope, toaster) {
      $scope.showDebug = true;
    }]);

It took me a while to even get to the point where I've isolated down these components, but now I'm pretty stuck.  Any ideas?

[plunker]: http://plnkr.co/edit/fwkF3NnHjkfDh5rhyB6h?p=preview
[toaster]: https://github.com/jirikavi/AngularJS-Toaster
[ui.bootstrap]: http://angular-ui.github.io/bootstrap/

Error Injecting Multiple Libraries into Angular

The *purpose* of the `ngOpen` directive is to preserve the [open attribute][open], as used with the [details element][details].

From the [docs][docs]:

>The HTML specification does not require browsers to preserve the values of boolean attributes such as open. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngOpen directive solves this problem for the open attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.

Neither `open` nor `details` are specific to angular.  This is perfectly valid html:

    <details open>
        <summary>Section Header</summary>
        Section Content
    </details>

Angular just added ngOpen to help with binding.

**Note**: This is an experimental feature and is [not supported in all browsers][support]

**P.S.** If you're looking to implement *accordion* or *collapse* functionality, I would recommend using [**Bootstrap UI**][Bootstrap UI] which offers angular directives for both that work across all browsers.

[docs]: https://docs.angularjs.org/api/ng/directive/ngOpen
[open]: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/open
[details]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
[support]: http://caniuse.com/details
[Bootstrap UI]: http://angular-ui.github.io/bootstrap

What is the point of the AngularJS directive ngOpen aside from using it with the details tag?

I'm trying to create an accordion component and this came up but not sure exactly if it helps considering I haven't been able to use it with anything other than the details tag.

    <body ng-app="">
        Check me check multiple: <input type="checkbox" ng-model="open"><br/>
      <details id="details" ng-open="open">
         <summary>Show/Hide me</summary>
      </details>
    </body>

Can AngularJS directive ngOpen be used for an accordion component?

From the [docs][ng-model]:

> `ngModel` will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.

So what's happening here with the following code:

    <textarea ng-model="mytextvalue" >...</texarea>

When the `ng-model` directive is processed, it will look for a property `mytextvalue` on `$scope`.  When it doesn't find one, it will create an empty value and then proceed to assign that empty value to your element.

If you want to default the value, you'll have to explicicly specify a value for `mytextvalue`

You can do that in **HTML** with `ng-init`



    ng-init="mytextvalue='John,2\nJane,3\nJohn,4\nJane,5'"

Or you can do it with **JavaScript** on your controller:



    $scope.mytextvalue = 'John,2\nJane,3\nJohn,4\nJane,5';

[ng-model]: https://docs.angularjs.org/api/ng/directive/ngModel

i have an angular app in which i am using a textbox as follows:

        <div class="panel-body text-center">
			<textarea id="mytext" class="form-control" rows="4">John,2
        Jane,3
        John,4
        Jane,5
			</textarea>
		</div>

Here the values John,2...etc are loaded by default. However when i introduce an ng-model to access this data as follows, the default values do not show up anymore. What might be happening?

    <textarea id="mytext" ng-model="mytextvalue" class="form-control" rows="4">

Default values of textarea missing after using ng-model

Here's another way to do it.  I can't speak to performance against PSL's method, but I think this reads a little easier to my not-very good at javascript eyes.



    function groupByName(names) {
      inputArray = names.split('\n');
      outputArray = {};
      
      for (i = 0; i < inputArray.length; i++) {
          
          var keyValuePair = inputArray[i].split(',');
          var key = keyValuePair[0];
          var count = Number(keyValuePair[1]);
          
          // create element if it doesnt' exist
          if (!outputArray[key]) outputArray[key] = 0;
          
          // increment by value
          outputArray[key] += count;
      }
    
      return outputArray;
    }

This will produce an object that looks like this:



    {
      "John": 6,
      "Jane": 8
    }

You can display the [name of each property *and* it's value with ng-repeat][SO1]:



    <li ng-repeat="(key, value) in groupedNames">
      The total for {{key}} is {{value}}
  	</li>

It's not an overwhelmingly complex bit of javascript, depending on the number of name value pairs.  So you can probably even get rid of the manual calc button and just put a [`$watch`][watch] on `values` in order to automatically recalculate totals with every change.



    $scope.$watch('values', function() {
      $scope.groupedNames = groupByName($scope.values);
    });

### [Demo in Plunker][Plunker]

[SO1]: https://stackoverflow.com/a/10954998/1366033
[watch]: https://docs.angularjs.org/api/ng/type/$rootScope.Scope
[Plunker]: http://plnkr.co/edit/LL7nRkKriHpEqlLEJi7R?p=preview

I have an angular app in this [plunker][1]

I have a text area which has some text in the format of (key,count) in them by default.

What i am trying to achieve is this(in the calc() function):

When the `button` is pressed the results of the summation should be displayed. 

I was able to split the data from the textarea into different arrays but i am missing the logic to add when the names match.

**EDIT:
please notice a few updates in my plunker**

New to angular and javascript!


  [1]: http://plnkr.co/edit/ZKOJSGGK5hpkbMYLny0v?p=preview

Angular js function to add counts based on match in names

They actually infact use the same placement function.

From the docs on popover:

>The popover directive also supports various default configurations through the **`$tooltipProvider`**. See the tooltip section for more information.

Meaning if you had the following code:



    app.config(['$tooltipProvider', function($tooltipProvider){
      $tooltipProvider.options({
        'placement': 'right'
      });
    }]);

It would change the default for both tooltips and popovers.

Best I can think of is it have some sort of wrapper around the element so you can do each in turn.



    <button class="btn btn-default sampleBtn"
      popover="Popover" popover-trigger="mouseenter" popover-placement="right">
      <span tooltip="Tooltip" tooltip-trigger="mouseenter"  tooltip-placement="top">
        Tooltip + Popover
      </span>
    </button>

### [Demo in Plunker][Plunker]

![screenshot][screenshot]

[Plunker]: http://plnkr.co/edit/RaUnUeruZLEGKMIBMSQZ?p=preview
[screenshot]: http://i.imgur.com/NqMSrku.png

In a large form, I'm using popovers to display error messages from the validation (I know, not best practice).

Now, I also want to add tooltips to display detailed explanation of the input.

However, using both, the `tooltip` and the `popover` directive (and their associated `-trigger` and `-placement` directives), the behavior is odd/buggy: Both, tooltip and popover are placed based on the `popover-placement` directive (ignoring the `tooltip-placement`) - and display the text provided for the popover.

    <button class="btn btn-default"
        popover="Popover" popover-trigger="mouseenter" popover-placement="right" 
        tooltip="Tooltip" tooltip-trigger="mouseenter" tooltip-placement="top" >
    Label</button>

See this [plunkr](http://plnkr.co/edit/gxYpvDKUw43pC7nE5aKa?p=preview).

Any idea how to make this work?


Element with popover and tooltip

The issue is that both <kbd>Enter</kbd> and <kbd>Tab</kbd> confirm the selection of the currently highlighted item and Typeahead *automatically* selects an item as soon as you start to type.  

If you want, you can click off the control to lose focus or hit <kbd>Esc</kbd> to exit out of typeahead, but those might be difficult to communicate to your users.

There's an open request in Bootstrap Ui to [not auto select / highlight the first item][#908]

One solution is to [populate the first item with the contents of the query thus far][fix], so tabbing or entering will only confirm selection of the current query:

**JavaScript**:



    angular.module('plunker', ['ui.bootstrap'])
        .filter('concat', function() {
            return function(input, viewValue) {
            if (input && input.length) {
                if (input.indexOf(viewValue) === -1) {
                    input.unshift(viewValue);
                }
                return input;
             } else {
                return [];
        }};})

**HTML**: 



    <input type="text" 
         ng-model="selected" 
         typeahead="state for state in states | filter:$viewValue | limitTo:8 | concat:$viewValue"
         class="form-control">

### [Demo in Plunker][plunker]

[#908]: https://github.com/angular-ui/bootstrap/issues/908

[fix]: https://github.com/angular-ui/bootstrap/issues/908#issuecomment-45199474
[plunker]: http://plnkr.co/edit/ocfun0qREIohq8xtx9iN?p=preview

I'm working on an app using AngularJS and Bootstrap UI. I've been fumbling my way through using the Typeahead control in Bootstrap UI.

[**Here's my Plunker**][1]

My challenge is I want the user to have the option of choosing an item, but not required to do so. For instance, right now, if you type `Test` in the text field and press "Enter", `Test` will be replaced with `Alpha`. However, I really want to use `Test`. The only time I want the text to be replaced is when someone chooses the item from the drop down list. My markup looks like the following:

    <input type="text" class="form-control" placeholder="Search..."
           ng-model="query"  
           typeahead="result as result.name for result in getResults($viewValue)"
           typeahead-template-url="result.html" />


How do I give the user the option of choosing an item, but allow them to still enter their own text?


  [1]: http://plnkr.co/edit/wkXpPMwcCq5ytLRO0ILN?p=preview

Typeahead Value in Bootstrap UI

From [Don't destroy an Angular Bootstrap modal on close][SO1]:

>Why don't you abstract the modal state into its own service? That way, whenever the modal controller is created, it uses the service to setup the view state on initialisation.
>
>Eg. create a service

    .factory('ModalStateService', function(){
        var state = {
            someValue: 'something'
        };

        return {
            getState: function() { return state; }
        };
    });

>Then in your controller:

    .controller('ModalCtrl', function($scope, ModalStateService){
        $scope.viewState = ModalStateService.getState();
    });

>Then in your modal content view for example:

     <span>{{viewState.someValue}}</span>

>If you were then to set `someValue` inside your modal, say through an input, the service state would be updated. Then when you create and destroy your modal, the state will persist.


[SO1]: https://stackoverflow.com/q/24653888/1366033

I am using Angular Bootstrap Modal to open a bunch of modals including video player inside

http://angular-ui.github.io/bootstrap/#/modal

I want to be able to keep where the video is at even if the modal is closed. It's just so next time I open the same modal again, I can see where I left off in the video.

In order to do that, I need to do:

1. Create each modal a separate instance

2. Instead of close(), I need to hide() the modal instead. Therefore the DOMs are still in there and the video player don't get re-created 

What's the elegant way to do this as the Bootstrap modal has no hide feature. Should I just use jQuery to show/hide the `.modal-backdrop` and `.modal` classes?

Hide Angular Bootstrap modal instead of close

# Option 1

As mentioned in [Angularjs required asterisks][1], you can add a directive for the required attribute like this:





    var app = angular.module('stack', []);

    app.directive("required", function() {
        return {
            restrict: 'A', // only for attributes
            compile: function(element) {
                // insert asterisk after elment 
                element.after("<span class='required'>*</span>");
            }
        };
    });



    .required {
      color: red;
    }



    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.js"></script>

    <div ng-app="stack">
      
      <input type="text" required />
      
    </div>




## Option 2
As mentioned in [Use CSS to automatically add 'required field' asterisk to form inputs][2], using background image is perfectly fine also:





    input[required], 
    select[required]{
        background-image: url('http://i.imgur.com/zEIWMh4.png');
        background-repeat: no-repeat;
        background-position: right;
        padding-right: 45px;
    }



    <label>Name</label>
    <input type="text" required /><br/>



> **Note**: You *cannot* use [`input:after`][4] to create a pseudo element after input because `:before` and `:after` ["are rendered are within the container itself as a child element and `input` can not contain other elements hence it's not supported"][3]

[1]: https://stackoverflow.com/q/23275915/1366033
[2]: https://stackoverflow.com/q/11197671/1366033
[3]: https://stackoverflow.com/a/4660434/1366033
[4]: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

In our Angularjs Application, we set the required Fields dynamically (ng-required). Therefore it is a quite complicated to add an `*` to the label every time it is required.

Now we have another idea. It may be possible to mark the input-field itself as required. In [this post][1], we found a part of the solution. 

There were CSS-Selectors for a required field, so we can set a Background-Image for that like this:
       


    input:required:valid {
      background-image: url(valid.png);
      background-position: right center;
      background-repeat: no-repeat;
    }
    input:required:invalid {
      background-image: url(invalid.png);
      background-position: right center;
      background-repeat: no-repeat;
      -moz-box-shadow: none;
    }


    
    <p>Name:</p>
    <input type="text" name="name" required />

But using that way, we need a background image of an `*`, And this seems to be very hacky. Especially, if there are different Sizes of the form, so the Image has different resolutions. 

Than we found [this (Section Labeled)][2] example and it seems to be possible to add Text to the input field.

So the question is, how can I put that all together, so that I can put an glyphicon from twitter-bootstrap to the right side of an input field, if that is required without editing all my forms?

Hers a [jsFiddle][3]. That might work, but the problem is, that background-size is not [supported][4] everywhere.


  [1]: http://skybeam.de/blog/html5-input-required/
  [2]: http://semantic-ui.com/elements/input.html
  [3]: http://jsfiddle.net/vnr41xat/2/
  [4]: http://caniuse.com/#search=background-size

Use glyphicon to mark required field with css

If you don't care if how much less than 1% it is, how about using [`Math.max()`][1] to just start at one percent and then start making meaningful progress after that.

### Demo in Stack Snippets





    var $traveled = $("#traveledMiles"),
        $total = $("#totalMiles"),
        $progressBar = $('.progress-bar');

    $($traveled).add($total).keyup(function(){

      var percent = $traveled.val() / $total.val() * 100;

      // at least 1%
      percent = Math.max(percent,1);

      $progressBar
        .css('width', percent+'%')
        .attr('aria-valuenow', percent)
        .children(".sr-only").html(percent+'%'); 

    }).keyup();



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


    <div class="form-group">
      <label for="traveledMiles">Traveled Miles</label>
      <input type="text" class="form-control" id="traveledMiles"
             placeholder="Enter Traveled Miles" value="5">
    </div>
    <div class="form-group">
      <label for="totalMiles">Total Miles</label>
      <input type="text" class="form-control" id="totalMiles" 
             placeholder="Enter Total Miles" value="23872">
    </div>

    <div class="progress">
      <div class="progress-bar" role="progressbar"  style="width: 60%;"
           aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">60%</span>
      </div>
    </div>



Since you have a label, you could even follow [Bootstrap's suggestion][2]:

> To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.

Like this:



    <div class="progress-bar" style="min-width: 2em;">






    var $traveled = $("#traveledMiles"),
        $total = $("#totalMiles"),
        $progressBar = $('.progress-bar');

    $($traveled).add($total).keyup(function(){

      var percent = $traveled.val() / $total.val() * 100;

      // at least 1%
      percent = Math.max(percent,1);
      
      // round off decimals
      percent = Math.round(percent);
      
      // max of 100%
      percent = Math.min(percent,100);

      $progressBar
        .css('width', percent+'%')
        .attr('aria-valuenow', percent)
        .html(percent+'%'); 

    }).keyup();



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


    <div class="form-group">
      <label for="traveledMiles">Traveled Miles</label>
      <input type="text" class="form-control" id="traveledMiles"
             placeholder="Enter Traveled Miles" value="5">
    </div>
    <div class="form-group">
      <label for="totalMiles">Total Miles</label>
      <input type="text" class="form-control" id="totalMiles" 
             placeholder="Enter Total Miles" value="23872">
    </div>

    <div class="progress">
      <div class="progress-bar" role="progressbar"  style="min-width: 2em;width: 60%;"
           aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        60%
      </div>
    </div>



[1]:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max
[2]: http://getbootstrap.com/components/#progress-label

I am using the bootstrap progress bar to show the percentage of miles covered by someone from a total of 23,872 miles.

For example if user A covered only 5 miles which means:

5/23872 = 0.00020945 * 100 = **0.02094504** miles.

Currently anything below 1% does not show up on the progress bar.

![enter image description here][1]

![enter image description here][2]

  [1]: http://i.stack.imgur.com/wMYXv.png
  [2]: http://i.stack.imgur.com/0bopV.png

Is it possible to be able to show the percentage of miles below 1 the bar so it lights up green just the 28% in the image above.

**Code for Conversion:**

    // Calculating Percentages for each region
    var ukPercent = $scope.ukTotal / 23872;
    var apacPercent = $scope.apacTotal / 23872;
    var naPercent = $scope.naTotal / 23872;
    
    $scope.ukPercentage = ukPercent * 100;
    $scope.naPercentage = naPercent * 100;
    $scope.apacPercentage = apacPercent * 100;

Showing less then 1% on the BootStrap progress bar

@Yosep is 100% right.  I'd also add that if you'd like to persist the state on each tab show, you can add the hash to the url.  This is important because users will likely want to take the current URL and share the current screen without having to guess what the ID would be. To do this, you can tap into the `shown.bs.tab` event add update the `location.hash`.

Here's an example from this question on [Bootstrap toggleable tabs without having tab links][1]:



    $(function() {
      
        // jump to tab if it exists 
        if (location.hash) {
            $('a[href=' + location.hash + ']').tab('show');
        }
        
        // add tab hash to url to persist state
        $(document.body).on("shown.bs.tab", function(e){
          location.hash = e.target.hash;
        });
        
    });


### [Here's a demo in Plunker][2]

[1]: https://stackoverflow.com/q/25699332/1366033
[2]: http://plnkr.co/edit/wfaHs8wOzZPkBK7Gn7WO

I have Bootstrap tab in page. It is working fine. I want to open this tabs from external page. is it possible.
  

     <div role="tabpanel"> 
              
             
              <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#permisions"  class="active" aria-controls="permisions" role="tab" data-toggle="tab">Tab1</a></li>
                <li role="presentation"><a href="#roles" aria-controls="roles" role="tab" data-toggle="tab">Tab 2</a></li>
                <li role="presentation"><a href="#users" aria-controls="users" role="tab" data-toggle="tab">Tab 3</a></li>
              </ul>
              
              
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active"id="permisions" >
                  <div id="exRowTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                    <div class="tableContainer">
                      <section class="techtable">
                        <div class="table-responsive">
                         Content 1
                        </div>
                      </section>
                    </div>
                  </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="roles">
                  <div id="exRowTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                    <div class="tableContainer">
                      <section class="techtable">
                        <div class="table-responsive">
                         Content 2
                        </div>
                       </section>
                    </div>
                  </div>
                </div>
                <div role="tabpanel" class="tab-pane"id="users">
                  <div id="exRowTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                    <div class="tableContainer">
                      <section class="techtable">
                        <div class="table-responsive">
                        Content 3
                        </div> 
                      </section>
                    </div>
                  </div>
                </div>
              </div>
            </div>

**My Requirement is: call tabs from different page.**
Suggest me other tab library if it is not possible with bootstrap.