Item class in list always initializes active

Question

I used as a reference for solving the problem: angular ng-repeat Skip an item if it Matches Expression.

Next, we know that Bootstrap has the class active to mark with a different color of the elements that are not active and I am using this along with Angularjs for when the user opens the page and load with AJAX certain information in a menu on the left side of the screen.

I use the directive ng-if to check if the item is not first in the list and place the class active but it’s not working, it’s marking active on all list items.

I want the Objeto 2, for example, stay white in the background and without the class active.

HTML:

<div class="col-md-3">
    <ul class="nav nav-pills nav-stacked" ng-init="inicializador()">
            <li ng-repeat="objeto in invoice.objetos" ng-if="objeto.posicao == 0" role="presentation" class="active">
                <a href="#">{{ objeto.atributo }}</a>
            </li>
            <li ng-repeat="objeto in invoice.objetos" ng-if="objeto.posicao != 0" role="presentation">
                <a href="#">{{ objeto.atributo }}</a>
            </li>
    </ul>
</div>

Javascript:

$scope.inicializador = function() {

                    $http({
                        method : "GET",
                        url : '<c:url value="/cadastros/objeto/listObjetos" />'
                    }).then(function mySucces(response) {

                        var length = response.data.length;
                        var data = response.data;

                        for (var i = 0; i < length; i++) {
                            $scope.invoice.objetos.push({
                                posicao : i,
                                nome : data[i]
                            });
                        }

                    }, function myError(response) {
                        alert("Erro ao listar objetos");
                    });

                }

Upshot:

Answer 1

I arranged it in a simple way, using the directive ng-class:

<ul class="nav nav-pills nav-stacked" ng-init="inicializadorObjeto()">
    <li ng-class="{'active':objeto.posicao == 0}" ng-repeat="objeto in invoice.objeto" role="presentation">
        <a href="#">{{ objeto.atributo }}</a>
    </li>
</ul>

I hope that when selecting another object is simple too, but this problem was initially solved.