Q:

Programming series of lights that turn on/off

I have 5 on/off lights that I would like to be managed dynamically in angular.  As seen below:

These are placed in parallel to a (working) slider and I want them to share the same scope.  
The basic logic is that when the slider is at 3, lights 1,2 & 3 should be ON and lights 4 & off should be OFF.  There are two CSS classes to show this green-on and green-off.  
Hardcoded HTML:
<span class="light green-off"></span><span>4</span><br />
<span class="light green-off"></span><span>3</span><br />
<span class="light green-off"></span><span>2</span><br />
<span class="light green-off"></span><span>1</span><br />
<span class="light red-off"></span><span>OFF</span> 

I know in angular to create a directive like so:
<div lights ng-model="lightValue"></div>

Directive
angularApp.directive('lights', function () {
    return {
        restrict: 'A',
        scope: {
            ngModel: '='
        },
        link: function (scope, element, attrs) {
            return scope.$watch('ngModel', function (newVal) {
                if (newVal ! == null) {
                    //update
                }
            });
        }
    }
});

This will listen to the value of lightValue which will range from 0-4.  
But I'm stuck as to where to put the logic as aforementioned that will change the class depending on the value.  
Do I create a template or return the HTML in the link and use $compile? 
Finally, is there a more efficient way than using ifs to assign the class (psuedo code below)? 
if (lightValue == 4) {
    light1 = on;
    light2 = on;
    light3 = on;
    light4 = on;
} else if (lightValue == 3) {
    light1 = on;
    light2 = on;
    light3 = on;
} else if (lightValue == 2) {
    light1 = on;
    light2 = on;
} //etc..

Update:
Thanks, I was able to use ngClass with some conditional statements to the desired effect:
<span class="light" ng-class="{'green-on' : notches == 4, 'green-off' : notches < 4 }"></span><span>4</span><br />
<span class="light" ng-class="{'green-on' : notches >= 3, 'green-off' : notches < 3 }"></span><span>3</span><br />
<span class="light" ng-class="{'green-on' : notches >= 2, 'green-off' : notches < 2 }"></span><span>2</span><br />
<span class="light" ng-class="{'green-on' : notches >= 1, 'green-off' : notches < 1 }"></span><span>1</span><br />
<span class="light" ng-class="{'red-on' : notches == 0, 'red-off' : notches > 0 }"></span><span>OFF</span>

I guess I could try write this into the directive to make it reusable. 

A:

i will assume your slider currently triggers a zero based integer value depending on the position where it is, changing lightValue.  then your lights class should activate based on it. 
<span ng-class="{'green-off' : lightValue <= 4 }" class="light"></span><span>4</span><br />
<span ng-class="{'green-off' : lightValue <= 3 }" class="light"></span><span>3</span><br />
<span ng-class="{'green-off' : lightValue <= 2 }" class="light"></span><span>2</span><br />
<span ng-class="{'green-off' : lightValue <= 1 }" class="light"></span><span>1</span><br />
<span ng-class="{'green-off' : lightValue <= 0 }" class="light"></span><span>off</span>

you could of course make this loop dynamic to generate the spans etc.