Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-controller="MyCtrl">
<li ng-repeat="t in tags">
    <div class="tag"
         ng-class="tagInfo[t.direction].class"
         title="{{getTitle(t.direction)}}">{{t.name}}</div>
</li>
</div>

CSS

.green-up { color: green; }
.red-down { color: red; }

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller("MyCtrl", ["$scope", 
    function($scope) {
        
        $scope.tags = [
            { direction:"positive", "name":"testing" },
            { direction:"negative", "name":"testing" }
        ];
        
        $scope.tagInfo = {
            positive:{ class:"green-up", title:"Percentage increase" },
            negative:{ class:"red-down", title:"Percentage decrease" }
        }
        
        $scope.getTitle = function(direction) {
            if (direction==="positive") {
                return "Increase";
            } else if (direction==="negative") {
                return "Decrease";
            }
        };
    }]);