Active class being added to the HTML but not its properties

Question

I've got a navigation menu which I want to add an active class to once it's clicked. It works great apart from the fact that the element doesn't receive the properties in the active class, it just gets added to the HTML as a class. I've also tried using $compile in my directive to ensure that the active class gets added but it still doesn't work. What am I missing here?

HTML:

<ul id="app-navigation" class="clearfix list">
    <li data-my-active-class>
        <img src="images/add.png" no-repeat class="nav-image">
    </li>
    <li data-my-active-class>
        <img src="images/edit.png" no-repeat class="nav-image">
    </li>
    <li data-my-active-class>
        <img src="images/delete.png" no-repeat class="nav-image">
    </li>
</ul>

Directive:

shoppingApp.directive('myActiveClass', ['$compile', function($compile) {

    return {
        restrict: 'A',
        link: function($scope, element, attrs) {

            element.on('click', function() {

                element.parent().children('.active').removeClass('.active');
                element.addClass('.active');
            });

            $compile(element)($scope);
        }
    }
}]);

CSS:

.active {
    background: red;
}

Answer 1

In your addClass and removeClass make it active instead of .active