AngularJS changing class with function

Question

I have an Agular app where I have a list of US states layout out as a UL in a "block" fashion.

http://jsfiddle.net/Mrbaseball34/3u375/

Now, when the states variable has an entry, the class on the particular state should be active (showing in a maroon color). I'm setting the class using a function because you cannot us the in clause. The code DOES go into the function and it DOES return true when the state == 'TX', however, the class is not being applied.

Template:

<div ng-controller="MyCtrl" id="state_scroller">
    <section class="states">
        <ul>
            <li ng-repeat="state in statesList" 
                ng-class="{true: 'active', false: ''}[selectedState($index)]"  
                id="st_{{state.id}}">{{state.id}}</li>
        </ul>
    </section>
</div>

What am I doing wrong here? Here's what the rendered code looks like in the Chrome debugger:

<div ng-controller="MyCtrl" id="state_scroller" class="ng-scope">
    <section class="states">
        <ul>
            <!-- ngRepeat: state in statesList -->
            <li ng-repeat="state in statesList" 
                ng-class="{true: 'active', false: ''}[selectedState($index)]" 
                id="st_AK" class="ng-scope ng-binding">AK</li>
            <!-- end ngRepeat: state in statesList -->
   <!-- snipped some -->
            <li ng-repeat="state in statesList" 
                ng-class="{true: 'active', false: ''}[selectedState($index)]" 
                id="st_TN" class="ng-scope ng-binding">TN</li>
            <!-- end ngRepeat: state in statesList -->
            <li ng-repeat="state in statesList" 
                ng-class="{true: 'active', false: ''}[selectedState($index)]" 
                id="st_TX" class="ng-scope ng-binding">TX</li>
            <!-- end ngRepeat: state in statesList -->
            <li ng-repeat="state in statesList" 
                ng-class="{true: 'active', false: ''}[selectedState($index)]" 
                id="st_UT" class="ng-scope ng-binding">UT</li>
            <!-- end ngRepeat: state in statesList -->
   <!-- snipped rest -->
            <!-- end ngRepeat: state in statesList -->
        </ul>
    </section>
</div>

Answer 1

$scope.selectedState = function(id) {
    var x = false;
    angular.forEach($scope.states, function (state, key2) {
        if (state.id == $scope.statesList[id].id) {
            x = true;
        }
    })
    return x;
};

You have to check everything, THEN return if you found it. Right now if the first one doesn't match, you exit out of the foreach. And then you don't return from the selectedState function (the foreach has it's own function, which returns back to the selectedState function, which then doesn't return anything.

http://jsfiddle.net/3u375/17/