AngularJS: if/else-if/else

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-animate.js"></script>
    <script src="https://cdn.rawgit.com/zachsnow/ng-elif/4f9cf12c46dca340de2d784f0a2be5e4bebaf1ff/src/elif.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    
    <script type="text/ng-template" id="yes-template">
      Here we are in our <code>ng-if</code> template.
    </script>
  </head>

  <body ng-controller="ctrl">
    <a class="test" ng-toggle="test1">test1 {{ test1 }}</a>
    <a class="test" ng-toggle="test2">test2 {{ test2 }}</a>
    <a class="test" ng-toggle="test3">test3 {{ test3 }}</a>
    
    &larr; <i>Click the tabs, eh?</i>
    
    <div class="case" ng-if="test1">
      <h1>if(test1)</h1>
      <p>
        This is the if block, which matches because <code>test1</code> is
        true
      </p>
    </div>
    <div class="case" ng-else-if="test2 && test3">
      <h1>else if(test2 &amp;&amp; test3)</h1>
      <p>
        This is the else-if block, which matches because <code>test1</code> is
        false and <code>test2 && test3</code> is true.
      </p>
    </div>
    <div class="case" ng-else>
      <h1>else</h1>
      <p>
        This is the else block, which matches because neither <code>test1</code>
        nor <code>test2 && test3</code> are true.
      </p>
      
      <h3>Nested Conditionals</h3>
      <p ng-if="test2">if(test2) // test2 == true</p>
      <p ng-else>else // test2 == false</p>
    </div>
    
    <div class="case">
      <b>
        Another Conditional
        <a class="test" ng-toggle="another"><code>{{ another ? 'yes' : 'no' }}</code></a>
      </b>:
      <span ng-if="another">Another <code>if</code>.</span>
      <span ng-else>Another <code>else</code>.</span>
    </div>
    
    <div class="case">
      <b>
        Try a template?
        <a class="test" ng-toggle="template"><code>{{ template ? 'yes' : 'no' }}</code></a>
      </b>:
      <span ng-if="template" ng-include="'yes-template'"></span>
    </div>
    
    <div class="case">
      <div ng-if="1 == 1">
        One equals 1.
      </div>
      <div ng-elif="2 == 2">
        Two equals 2.
      </div>
      <div ng-else>
        Something crazy.
      </div>
    </div>
  </body>

</html>

var app = angular.module('app', ['ngAnimate', 'elif']);

app.directive('ngToggle', [
  '$parse',
  function($parse){
    return {
      restrict: 'A',
      link: function(scope, element, attrs){
        var modelFn = $parse(attrs.ngToggle);
        element.on('click', function(){
          scope.$apply(function(){
            modelFn.assign(scope, !modelFn(scope));
          });
        });
        scope.$watch(modelFn, function(value){
          element.toggleClass('toggled', !!value);
        });
      }
    }
  }
]);

app.controller('ctrl', [
  '$scope',
  function($scope){
    $scope.test1 = true;
    $scope.test2 = false;
    $scope.test3 = false;
    
    $scope.names = [
      'Zach',
      'Matt',
      'Bryan'
    ];
  }
]);

body {
  font-family: arial;
}

h1,code, .test {
  font-family: monospace;
}

.test {
  display: inline-block;
  padding: 10px 20px;
  background-color: #eeeeee;
  cursor: pointer;
  text-align: center;
}

.test.toggled {
  background-color: #88ff88;
  font-weight: bold;
}

.case {
  padding: 20px;
  border: 1px solid #f0f0f0;
  margin-bottom: 20px;
}
.case.ng-enter {
  -webkit-transition: 1s linear all; /* Chrome */
	transition: 1s linear all;
	opacity: 0;
}
.case.ng-enter.ng-enter-active {
  opacity: 1;
}