ng-class and value load using $http

Question

I've got partial view with one element which class should depend on value of variable in $scope:

<a class="btn" ng-class="{'btn-success': led == 'on'}" ng-click="toggleLed()">On</a>      

In controller I load the intial value for led using $http:

 $scope.led = 'unknown';       

 $http.get('/green')
        .success(function (data) {                                 
                $scope.led = data;                                  
        });

My problem is that after opening page led variable is updated but CSS class is not. Adding $scope.$apply() does not help (Error: error:inprog Action Already In Progress). Is there any solution to that kind of problem?

Answer 1

Have you checked the content of "data"?

Usually .success receives a response and the data is in response.data.

Also, try to use booleans for the led value, false (off) when initialised, then true (on). This way, you can just use:

<a class="btn" ng-class="{'btn-success': led, 'btn-error': !led}" ng-click="toggleLed()">On</a>