Angular JS Chevron Progress Bar

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
<div class="well">
Click the chevrons to see the different colors.
</div>

<div ng-controller="MyCtrl">
    <progressbar steps="steps.all"></progressbar>
</div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    background: #000
}
h1 {
    font-size: 12pt;
}
div.chevrons {
    text-align: center;
}
ul.chevrons {
    font-size: xx-large;
    margin-bottom: 1em;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
    display: inline;
}
ul.chevrons li:last-child {
    border-color: red;
}
ul.chevrons li {
    height: 40px;
    width: 160px;
    font-size: 15px;
    display: inline-block;
    font-weight: bold;
    margin-left: -10px;
}
ul.chevrons li:first-child {
    margin-left: 0px;
}
/* adjust the first item to not have a chevron on the left
.chevrons li:first-child:before {
	border:none
}*/

/*
adjust the last arrow to have no arrow on the right hand side
.chevrons li:last-child:after {
	border:none
}
*/
 ul.chevrons li:before {
    content:"";
    border-top: 20px solid #309dd4;
    border-bottom: 20px solid #309dd4;
    border-left: 10px solid transparent;
    height: 0;
    position: absolute;
}
ul.chevrons li:after {
    content:'';
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 10px solid transparent;
    border-left: 10px solid #309dd4;
    height: 0;
    position: absolute;
}
ul.chevrons li span {
    padding-top: 10px;
    background: #309dd4;
    text-align: center;
    margin-left: 10px;
    height: 40px;
    width: 130px;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
}
ul.chevrons li.success a {
    color: #ffffff;
}
ul.chevrons li.success span {
    background: #67b646;
}
ul.chevrons li.success:after {
    border-left: 10px solid #67b646;
}
ul.chevrons li.success:before {
    border-top: 20px solid #67b646;
    border-bottom: 20px solid #67b646;
}
ul.chevrons li.failure a {
    color: #ffffff;
}
ul.chevrons li.failure span {
    background: #b84c4c;
}
ul.chevrons li.failure:after {
    border-left: 10px solid...

JavaScript

angular.module('myApp', ['frolicProgress']).controller('MyCtrl', function ($scope, ProgressSteps) {
    $scope.steps = new ProgressSteps($scope)
    $scope.$on('progress:step:clicked', function (event, step) {
        if (step.operation == 'query') step.status = 'inprogress';
        if (step.operation == 'transform') step.status = 'failure';
        if (step.operation == 'visualize') step.status = 'success';
    });
});

angular.module('frolicProgress', []).directive('progressbar', function () {
    var dir;
    dir = {
        restrict: "E",
        template: "<div class='chevrons'>\n<ul class='chevrons'>\n<li ng-class='step.status' ng-repeat='step in _steps'><span><a ng-click=\"operationClicked(step)\" href=\"#\" ng-bind=\"step.title\"/></span></li>\n					 </ul></div>",
        replace: true,
        scope: {
            _steps: "=steps",
            _state: "=state"
        },
        link: function (scope, element) {
            var bar;
            bar = angular.element(element.children());
            scope.operationClicked = function (step) {
                return scope.$emit('progress:step:clicked', step);
            };
        }
    };
    return dir;
}).factory('ProgressSteps', function () {
    var ProgressSteps;
    return ProgressSteps = (function () {
        function ProgressSteps($scope) {
            this.add('query', 'Query');
            this.add('transform', 'Transform');
            this.add('visualize', 'Visualize');
            $scope.$on('easel:progress:query:started');
        }



        ProgressSteps.prototype.all = [];

        ProgressSteps.prototype.add = function (operation, title) {
            return this.all.push({
                operation: operation,
                title: title,
                status: null
            });
        };

        ProgressSteps.prototype.inprogress = function (operation) {
            return this.updateStatus(operation, 'inprogress');
        };

        ProgressSteps.prototype.failure =...