Q:

AngularJS: convert bound value

I have a bound list and I'm looking for a way to "convert" the variable that it's bound to i.e. in the example below I want to bind the backgroundColor to int variable but using some functionality where I could change the color based using some predefined logic (red for state=0, blue for state=1, and black for state=2). 
http://jsfiddle.net/UWqWf/16/
I could do this via dom manupulation in the click event but i would have to write "dirty" code to change the color and also make sure to update the $scope.items[x] 
Can this be done?
<ul ng-app ng-controller="MyCtrl">
    <li ng-repeat="i in items" ng-click="toggle()"> <span style="background-color: {{i.state}}"> {{i.name}} </span> </li>
</ul>

function MyCtrl($scope) {
    $scope.items = [{"name":"a","state":"1"},{"name":"b","state":"2"}, {"name":"c","state":"0"}];
    $scope.toggle = function(){
        // toggle the state i.e.
        // if state<3 then state++
        // else state=0 
     };
};

A:

I like to keep my styles out of javascript
<style>
.state-0{ background-color: red;}
.state-1{ background-color: blue;}
.state-2{ background-color: black;}
</style>

<ul ng-app ng-controller="MyCtrl">
  <li ng-repeat="i in items" ng-click="toggle()"> 
    <span class="state-{{i.state}}">
      {{i.name}}
    </span>
  </li>
</ul>

