trail.js

angular.module('trailicons').
directive('trail', function () {
    var trailTmplt =
        '<ul class="trail" ng-init="setTrailItems()">' +
            '<li ng-repeat="item in items track by $index" class="{{item.class}}"></li>' +
        '</ul>';

    return {
      controller: 'TrailController',
      restrict: 'E',
      replace: true,
      scope: {
          data: '=',
          binary: '='
      },
      template: trailTmplt
    }
}).
controller('TrailController', function ($scope) {
    function getDateOnly(date) {
        date = new Date(date);
        return new Date(date.getFullYear(), date.getMonth(), date.getDate())
    }

    $scope.showModal = false;
    $scope.toggleModal = function(){
        $scope.showModal = !$scope.showModal;
    };

    $scope.setTrailItems = function () {
        $scope.items = [];

        // get only last 7 items from data
        if($scope.binary == undefined || $scope.binary == '') {
            var arr = $scope.data;
            if(arr && arr.length >= 7) {
                arr = arr.slice(Math.max(arr.length - 7, 0));
            }
            $scope.items = arr;
        }
        else {
            // construct trail using binary data for demo
            var splits = $scope.binary.split('');
            for(var split in splits) {
                var value = splits[split];
                var itemclass = '';
                switch (value) {
                    case '0':
                        itemclass = 'done';
                        break;
                    case '1':
                        itemclass = 'miss';
                        break;
                    default:
                        itemclass = 'none';
                        break;
                }
                $scope.items.push({'class': itemclass});
            }
        }
    };
});