FAQ

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