AngularJS addClass isn't working

Question

I have been trying to addClass through AngularJS and the code doesn't seem to work, weird thing is addClass is working on Parent Menu Item but doesn't work on Sub item.

I have a nested UL and LI, when I click on the Parent LI ParentLi function gets called and it adds a "focused" class to the Clicked LI, this works fine but when I click on Nested LI's I call childLi and I do the same operation as done for the Parent but class doesn't get added. I am new to Angular and I hope I am doing this in the right way.

$scope.parentLi = function(event) {
    var liElement = angular.element(event.target.parentNode);
    var allParentLiElements = document.getElementsByClassName('parent-dropdown');
    if (!liElement.hasClass('focused')) {
        angular.element(allParentLiElements).removeClass('focused');
        liElement.addClass('focused');
    } else
        liElement.removeClass('focused');
};

$scope.childLi = function(event){
    var liElement = angular.element(event.target.parentNode);
    var allParentLiElements = document.getElementsByClassName('child-dropdown');
    if(!liElement.hasClass('focused')){
        angular.element(allParentLiElements).removeClass('focused');
        $(event.target).closest('.parent-dropdown').addClass('focused');
        liElement.addClass('focused');
    } else
        liElement.removeClass('focused');
}

Note that i have edited my jsfiddle code based on the answer given by Jiam30.

adding focused class should work like active class i.e the menu that i just clicked should have focused class other should not, same way if i have hover on menu item and click on subitem, both the subitem and the parent item should have focused class.

Fiddle

Answer 1

Manipulating elements in a controller should be avoided.

Use ng-class instead (also use ng-repeat to avoid HTML repetition). For instance:

<li class="dropdown parent-dropdown" ng-click="parentLi()" ng-class="{'focused': isDropdownFocused}"></li>

With this function in the controller:

$scope.parentLi = function() { 
    $scope.isDropdownFocused = !$scope.isDropdownFocused;
};

Updated Fiddle: http://jsfiddle.net/6be56/127/