ng-repeat after renewal does not update DOM

[morde]

<header id="tabHeader">
    <div class="h-head" ng-click="switchTab($index)" ng-repeat="key in data">{{key.grad}}</div>
    <div class="addHead" ng-click="addTab()">+</div>
</header>

There are deposits, on the pressure to addHead, add a new one.

$scope.addTab = function () {
$scope.data.push({grad : 'new grad'});
removeActive();
console.log(headers.length);
makeActive(headers.length-1);

};

I add to the data set another object and ng-repeat draws a new deposit, but the function makeActive does not see a new element.
That's how the collection of deposits is:

var headers = document.getElementById('tabHeader').children;

Function:

function makeActive(i) {

console.log(headers);

headers[i].classList.add('active');

$scope.activeData = $scope.data[i];

}

[Alberto]

When you use the angular, forget about manipulating DOM directly, it's only necessary in extreme cases.

For headers[i].classList.add('active'); Yes. ng-class

It will be sufficient to recall the active input index ($scope.activeTab = index) As a result, classes can be very easily assigned:

<header id="tabHeader">
    <div class="h-head" ng-class="{active: $index == activeTab}" ng-click="switchTab($index)" ng-repeat="key in data">{{key.grad}}</div>
    <div class="addHead" ng-click="addTab()">+</div>
</header>`

In this case, a class will be applied to the chosen taboo. active

PS: Do not forget to default the first active contribution