AngularJS ng-class cannot override Bootstrap dropdown CSS rules

Question

Using AngularJS-1.2.26 directive ng-class, am attempting to override Bootstrap 3.2 CSS rules for dropdown-menu & dropdown-header, but my new font-size, padding, margin are not effecting html display.

I am using AJS1.2.26 ng-class successfully to override (BS3 base classes) navbar-brand, navbar-nav among others using AJS techniques such as follows:

<a data-ng-class="settings.navbarBrandDensity" class="navbar-brand" ui-sref="home">App</a>
<ul data-ng-class="settings.navbarNavDensity" class="nav navbar-nav">
<span data-ng-class="{invisible: settings.displayDensity != 'comfortable'}"> class="fa fa-check fa-fw" </span>&nbsp;&nbsp;Comfortable</a>

I have a Plunker that shows navbar working, but dropdown not working:

http://plnkr.co/edit/TKq3MQdSaK3aTXJgSirU

In the Plunker above click on the Gear Icon (e.g., setting) to switch between Comfortable Cozy, Compact and navbar will change, but associated dropdown will not.

The variables displayDensity, navbarBrandDensity, navbarNavDensity are initialized in .run of MainController, and in .controller I setup $watches. The basic idea is to implament something like the GMail Comfortable, Cozy, Compact feature.

.run ...
$rootScope.settings = {
  displayDensity: 'cozy',
  navbarDensity: 'navbar-cozy',
  navbarNavDensity: 'navbar-nav-cozy',
  navbarBrandDensity: 'navbar-brand-cozy',
  navbarToggleDensity: 'navbar-toggle-cozy',
  faIconDensity: '',
  dropdownMenuDensity: 'dropdown-menu-cozy',
  dropdownHeaderDensity: 'dropdown-header-cozy'
};

.controller ...
$scope.$watch('settings.displayDensity', function() {
  $scope.settings.navbarDensity = 'navbar-' + $scope.settings.displayDensity;
  $scope.settings.navbarNavDensity = 'navbar-nav-' + $scope.settings.displayDensity;
  $scope.settings.navbarBrandDensity = 'navbar-brand-' + $scope.settings.displayDensity;
  $scope.settings.navbarToggleDensity = 'navbar-toggle-' + $scope.settings.displayDensity;
  $scope.settings.faIconDensity = 'fa-icon-' + $scope.settings.displayDensity;
  $scope.settings.dropdownMenuDensity = 'dropdown-menu-' + $scope.settings.displayDensity;
  $scope.settings.dropdownHeaderDensity = 'dropdown-header-' + $scope.settings.displayDensity;
});

Below in dropdown-menu-cozy are the default values from BS3, and in dropdown-menu-comfortable are new rules I want to apply when user clicks on 'Comfortable'

dropdown-menu-cozy {
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
}

dropdown-menu-comfortable {
  padding: 10px 0 !important;
  margin: 4px 0 0 !important;
  font-size: 18px !important;
  /* font-size: inherit !important; */
}

Here is a screenshot from Chrome development tools that shows when I eliminate (i.e., un-check) the values for font-size, padding, margin which I end up with, then things look ok. (the un-check causes dropdown to inherit rules I've sucessfully changed in navbar parent) I am using pestiside CSS debug library to get those line/boxes around elements in picture.

CSS sort of drive me nuts! I'am a programmer baby! If anyone can look through the small Plunker and see some better approach it would be appreciated.

Maybe there are limitations to ng-class I am not aware of or fixes in later varsions of AJS (have not tried 1.3.x because of IE project limitations)

I can produce a complete GitHub using Yeoman, Grunt, Bower if someone is interested in this Comfortable, Cozy, Compact manipulation of BS3.

If there are already existing CSS files (projects) out there that Compact or Expand BS3 padding, margins I would certainly be interested!

Answer 1

Simple but nasty mistake :

you forgot the dot in your css indicating classes

simply replace all

dropdown-menu-... {
   ...
}

with

.dropdown-menu-... {
    ...
}