AngularJS add/removeClass does nothing? - angularjs

Question

I am trying to add and remove a class on button click. Unfortunately nothing I do seems to achieve this. The class never changes no matter what I do.
Here is what I am trying to change;
<div ng-controller="navbarCollaspeCtrl">
<nav id="mainNav" class="navbar fixed-top navbar-expand-lg navbar-transparent">
<button class="navbar-dark navbar-toggler" ng-click="changeClass()" href="" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
And here is the Angular part;
.controller('navbarCollaspeCtrl', ['$scope', '$element', function($scope, $element) {
$scope.changeClass = function() {
var el = document.getElementById('mainNav');
$element.removeClass(el, "navbar-transparent");
$element.addClass(el, "navbar-primary");
console.log(el);
}
}])
The 'navbar-transparent does not get removed. And navbar-primary never gets added. Any thoughts?

Answer 1

There is no need to manipulate DOM elements like this for simple scenarios like this one (this is more of a jQueryish approach). Instead create a variable and bind to it to toggle the style.
Html
<nav id="mainNav" class="navbar fixed-top navbar-expand-lg" {{transparent ? 'navbar-transparent': ''}}">
JS
var myApp = angular.module('myApp',[]);
myApp.controller('navbarCollaspeCtrl', ['$scope', '$element', function($scope, $element) {
$scope.transparent = false;
}]);
You can also use ng-class directive.