Edit in JSFiddle

function LoadingController($scope, $timeout) {
    $scope.description = 'CHECKING FOOD STANDARDS AGENCY';
    $scope.isActive = false;
    $scope.rating = 0;
    $scope.classes = ['black', 'white', 'white', 'white', 'white', 'white']

    $scope.start = function () {
        // dont start if already started
        if ($scope.isActive) return;
        $scope.isActive = true;
        $scope.incrementRating();
    };

    $scope.stop = function () {
        $scope.isActive = false;
    };

    $scope.incrementRating = function () {
        if ($scope.isActive) {
            $timeout(function () {
                $scope.classes[$scope.rating] = 'white';
                $scope.rating === 5 ? $scope.rating = 0 : $scope.rating++;
                $scope.classes[$scope.rating] = 'black';
                $scope.incrementRating();
            }, 100);
        }
    };

}

<div id="loading" ng-app ng-controller="LoadingController">
    <div class="numbers" >
        <div ng-repeat="class in classes" ng-class="class">{{$index}}</div>
    </div>
    <div id="description">{{description}}</div>
    <p>
        <button ng-click="start()">START</button>
        <button ng-click="stop()">STOP</button>
    </p>
</div>

#loading {
    font-family: Verdana, Arial, Helvetica;
    border: solid 2px #000;
    height:70px;
    width:265px;
    border-radius:7px;
    background-color: #d6e457;
}
#loading #description {
    text-align: center;
    font-size: 10.5px;
    font-weight: bold;
}
#loading .numbers {
    height: 35px;
    padding:5px;
}
#loading .numbers div {
    float: left;
    border-radius: 20px;
    text-align: center;
    border: solid 1px #000;
    margin:7px;
    padding-top:2px;
    height: 23px;
    width: 25px
}
.black {
    color: #fff;
    background-color: #000;
}
.white {
    color: #000;
    background-color: #fff;
}