Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



41 Commits

Repository files navigation


A simple collection of control flow directives: ng-if, ng-else-if, and ng-else.

All directives support animations via $animate. ng-if can be used on the same element as ng-repeat, just like the "real" ng-if that it overrides. The primary caveat is that a given if/else-if/else construct must exist in the same AngularJS scope (hence it doesn't make sense to say that either ng-else-if or ng-else work with ng-repeat, as ng-repeat introduces a new scope -- obviously you can use it within an ng-repeat, or any other directive). Similarly, while using an ng-if on an ng-include is supported, note that ng-include introduces a new scope, so that the ng-if is actually not on the same scope as it would appear based solely on the structure of the DOM. This means that the following won't work because, despite appearances, ng-if and ng-else are actually in sibling scopes:

  <div ng-if="someTest" ng-include="'someTemplate'"></div>
  <div ng-else="someTest" ng-include="'someOtherTemplate'"></div>

Check out a live demo.


  1. AngularJS.


  • Load elif.js.

  • Add elif as a dependency to your angular module.

  angular.module('yourModule', [
    // ... other dependencies ...
  • Use ng-if, ng-else-if, and ng-else in your templates. You can also use ng-elif as an alias for ng-else-if if you prefer.


  <div ng-if="someCondition">
    Some random junk in the middle.
  <div ng-else-if="someOther && condition">
  <div ng-else-if="moreConditions">
  <div ng-else>
    More nonsense.
  <h1 ng-if="anotherIfElse">...</h1>
  <h1 ng-elif="elifForPythonProgrammers">...</h1>
  <h1 ng-else>...</h1>


To build a release and run tests:

  $ npm install
  $ bower install
  $ gulp test