scope in angular and applied css class only on first div

Question

I'm calling js function every 2 seconds where on certain condition I want to update div on the view.

 <div id="ball_{{ballIndex}}">{{ball}}</div>

on ng controller

       var myCounter = 0;

        var interval = $interval(function () {
            if (myCounter <= 35) {
                myCounter ++;
                DoSomething();
            } else {
                //
            }
        }, 1500);

        function setCurrentBallEffect() {
            $('#ball_' + myCounter).addClass('magictime puffIn');                
        }

        function DoSomething() {
            if (myCounter == 0) {
                $scope.ballIndex = 1;
            } else {
                $scope.ballIndex = myCounter;
            }
        }

using this code only first div in iteration is applied with class magictime puffIn. When I hardcode div id's on the view side like <div id="ball_1">1</div> <div id="ball_2">2</div> .. applied css class work on each div. What I'm doing wrong?

Update: Tried with

<div ng-attr-id="{{ 'ball_' + ballIndex }}"> </div>

but problem is still present.

answered in [this post](http://stackoverflow.com/questions/23655009/how-to-set-the-id-attribute-of-a-html-element-dynamically-with-angular-js). It's the same issue as why you can't write `` but have to use `` — AndersRehn, Sep 10 '15 at 08:18
Perhaps I haven't understood your question entirely. When is the function `setCurrentBallEffect()` ever called? Perhaps provide more code, especially the part where the `setCurrentBallEffect()` function is called. — AndersRehn, Sep 10 '15 at 09:21

mehrdad · Answer 1 · 2015-09-10T09:01:19.757

At first you must define

var myCounter =0;

I don't understand ball

you must defined it like this :

$scope.ball=0;

I Change view like this

<div id="ball_{{ballIndex}}">{{ballIndex}}</div>

and your javascript changed like this:

var poolCounter = 0;
    var myCounter = 0;

    var interval = $interval(function () {
        if (myCounter <= 35) {
            myCounter++;
            DoSomething();
        } else {
            //
        }
    }, 1500);

    function setCurrentBallEffect() {
        $('#ball_' + myCounter).addClass('magictime puffIn');
    }

    function DoSomething() {
        if (myCounter == 0) {
            $scope.ballIndex = 1;
        } else {
            $scope.ballIndex = myCounter;
        }
    }

scope in angular and applied css class only on first div

1 Answers1