FAQ

Bootstrap3 support

Currently the Bootstrap3 support is work in progress and as such is not officially supported. However we are pretty close to releasing support and most of directives are already updated to BS3 support in a dedicated branch: https://github.com/angular-ui/bootstrap/tree/bootstrap3

If you want to give BS3 a try you will need to clone this repository and build it on your own following development instructions: https://github.com/angular-ui/bootstrap/tree/bootstrap3#development Once again, keep in mind that this is unreleased version so you need to be prepared to build it yourself.

As this is an open-source project run by volunteers in their spare time we can't give any precise release dates. You can track progress towards official support by checking this milestone: https://github.com/angular-ui/bootstrap/issues?milestone=6&page=1&state=open

My input / select element doesn't work as expected inside the tab / accordion directive

This is a scoping issue. Many directives from this repository are creating a new scope. This means that your ngModel binding gets evaluated in the context of a new, child scope, and not in the context of an original scope. As a quick rule of thumb you should always have a dot as part of your ngModel expression. In depth discussion of the topic can be found here:

• https://github.com/angular/angular.js/wiki/Understanding-Scopes
• http://www.youtube.com/watch?v=DTx23w4z6Kc

My input elements stop working when I place a tooltip / popover on it

This is a scoping issue. In the current version of AngularJS each DOM element can have one and only one scope. In other words each directive placed on a given DOM element are evaluated against one scope. Both tooltip and popover are creating a new scope so placing them on an input make the ngModel to be evaluated in the context of a new scope created by a tooltip / popover.

Currently the best option of working around this problem is to prefix an expression inside the ngModel with a parent scope, ex:

<input type="text" tooltip="Tooltip on foo" ng-model="$parent.fooModel">

ng-show / ng-hide doesn't work with the alert directive

The alert directive creates a new isolated scope. In AngularJS one DOM element can have only one scope attached to it so the ng-hide gets "locked" in an isolated scope. You can easily work-around it by doing one of the following:

• prefix ng-show / ng-hide expression with $parent:

<alert ng-hide="$parent.hideAlerts" type="'error'">Alert with directive</alert>

• wrap an alert into a separate div:

<div ng-hide="hideAlerts" >
  <alert type="'error'">Alert with directive</alert>
</div>

While we do agree that this behavior (and the associated work-around) is not very intuitive, this is one of the problems that needs to be fixed in the AngularJS itself, see: https://github.com/angular/angular.js/issues/2500