Demo fiddle

Related to a comment at http://www.bennadel.com/blog/2712-refactoring-bnrepeatswitch-to-use-a-multi-priority-directive-in-angularjs.htm.

by ExpertSystem

HTML

<script src="http://code.angularjs.org/1.3.8/angular.min.js"></script>
<div>
    <h1>
        Refactoring bnRepeatSwitch To Use A Multi-Priority Directive In AngularJS
    </h1>
    <h2>
        Your Team &mdash; {{app.users.length}} users and
        {{app.invitations.length}} outstanding invitations.
    </h2> 
    <ul>
        <li ng-repeat="person in app.people track by person.uid"
            bn-repeat-switch="person.isInvitation"
            switch-once="true">
            <div bn-repeat-switch-when="true" class="invitation">
                {{person.email}}
                (<a ng-click>Resend</a> or <a ng-click>Cancel</a> invitation)
            </div>
            <div bn-repeat-switch-when="false" class="user">
                {{person.name}} &mdash; {{person.email}}
            </div>
        </li>
    </ul>
</div>

<!-- -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- -->
<!-- Page Footer -->
<small class="footer" ng-non-bindable="">
    <div ng-app="footerApp" ng-controller="FooterCtrl as footer">
        <span class="left">
            <b>Angular v{{footer.version.full}}</b>
            ({{footer.version.codeName}})
        </span>
        <span class="right">
            &copy;
            <a ng-href="{{footer.author.url}}" target="_blank">
                {{footer.author.name}}
            </a>
        </span>
    </div>
</small>

CSS

a[ng-click] {
    cursor: pointer;
    text-decoration: underline;
}

.invitation {
    color: #AAAAAA;
    font-style: italic;
}

/* -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- */
/* Page Footer */
body { padding-bottom: 2em; }
.footer { background-color: White; border-top: 1px solid rgba(100, 100, 100, 0.33); bottom: 0; display: block; font-size: 0.75em; height: 1.5em; left: 0; margin: 0 5px; overflow: auto; padding: 5px; position: fixed; right: 0; }
.footer > div { display: flex; flex-direction: row; }
.footer .left { flex-grow: 2; text-align: left; }
.footer .right { flex-grow: 1; text-align: right; }

JavaScript

(function () {'use strict';
              
angular.
    module('myApp', [], config).
    controller('AppCtrl', AppCtrl).
    directive('bnRepeatSwitch', bnRepeatSwitchDirective);

function AppCtrl() {
    var self = this;

    self.invitations = [];
    self.people = [];
    self.users = [];

    _initialize();
    
    function _initialize() {
        for (var i = 1; i <= 5; i++) {
            self.invitations.push({
                id: i,
                email: ('ben+' + i + '@bennadel.com')
            });

            self.users.push({
                id: i,
                name: ('ben+' + i),
                email: ('ben+' + i + '@bennadel.com')
            });
        }

        self.people = self.invitations.concat(self.users).sort(comparePeople);
        self.people.forEach(function (person) {
            person.isInvitation = !person.hasOwnProperty('name');
            person.uid = (person.isInvitation ? 'invitation-' : 'user-') +
                         person.id;
        });
    }

    function comparePeople(p1, p2) {
        var name1 = (p1.name || p1.email).toLowerCase();
        var name2 = (p2.name || p2.email).toLowerCase();
        return (name1 < name2) ? -1 :
               (name1 > name2) ? +1 :
                                  0;
    }
}

function bnRepeatSwitchDirective($compile, $log, $parse) {
    var CASE_ATTR = 'bn-repeat-switch-when';

    return {
        compile: bnRepeatSwitchCompile,
        priority: 999,
        restrict: 'A'
    };

    function bnRepeatSwitchCompile(tElem, tAttrs) {
        $log.debug('Compiling bnRepeatSwitch...', tElem[0]);

        var switchExpression = $parse(tAttrs.bnRepeatSwitch);
        var switchCases = {};
        var switchOnce = (tAttrs.switchOnce === 'true');

        Array.prototype.forEach.call(
                tElem[0].querySelectorAll('[' + CASE_ATTR + ']'),
                iterateOverCaseTemplates);

        if (tAttrs.hasOwnProperty('switchOnce')) tAttrs.$set('switchOnce', null);
       ...