background color does not change with ng-class condition in angularjs

Question

All other css element working fine rather background-color and color.

    <md-button class="md-raised" ng-style="style1"
                       ng-click="style1=style; style2=null;style3=null;style4=null;removable=0;loadPorcessBarcodes();Head.ProcessMode=1" 
                       ng-class="{'selected-btn': Head.ProcessMode == 1}">Auto Nozzle From Stock</md-button>

My css:

.selected-btn {
        padding: 2px;
        font-size: 20px;
        color: #ffffff;
        background-color: #122b01;
    }

Answer 1

It seems as you've been using ng-style, which is already applying background-color and color style. So even though you apply a class over it with the overridden property, the same element would not reflect, because inline CSS takes first preference. If you wanted to enforce background-color and color properties to be enforced then mark them as !important to see the expected behavior.

---

Other better way to solve this problem would moving style1 to new class and apply it using ng-class with its appropriate expression.