Looking to change the class of the first child inside div#programmation
<div id="programmationEtat">
<div class="tab-pane ng-scope">...</div>
<div class="tab-pane ng-scope">...</div>
<div class="tab-pane ng-scope">...</div>
...
</div>
Attempted solution:
var children = document.getElementById("programmationEtat").children;
console.log(children);
children[0].className = 'active';
console.log(children);
First console log displays:
tab-pane ng-scope
Second displays:
active
However, there is no visual change and the HTML remains the same:
<div class="tab-pane ng-scope">
What could be the issue ?! Appreciate any help!
UPDATE: Identified the problem: The issue was related to a dynamic directive linked to a scope that included this div:
app.directive('dynamic', ['$compile', function ($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function (html) {
ele.html(html);
$compile(ele.contents())(scope);
});
}
};
}]);
Here's the relevant code:
$scope.programmation='...<div id="programmationEtat">
<div class="tab-pane ng-scope">...</div>
<div class="tab-pane ng-scope">...</div>
<div class="tab-pane ng-scope">...</div>
...
</div>...'
HTML:
<div dynamic="programmation" id="programmationEtat">
...
</div>
It appears that updating using document.getElementById(...) on content within $scope.programmation is not possible, modifications must be made directly to $scope.programmation.
To resolve the issue, I utilized the replace function ($scope.programmation.replace(...))!