ng-class not updating after the value change in ng-repeat angularjs

Question

I am trying to set an active class based on the value in ng-repeat. I am able to achieve it on the first-page load based on the default but whenever the value is changed the class is not changed. I am using angularjs and here is my code

HTML

  <div style="margin-bottom:5px;margin-top:5px;">
                    <a ng-repeat="sizes in mainproductsdata|unique:'SizeName' | filter:selectedcolor" data-ng-click="showdetailsbyid(sizes.SizeName);" ng-class="{'colorselected': '{{sizes.SizeName}}' == '{{selectedsize}}' , 'colornotselected': '{{sizes.SizeName}}' != '{{selectedsize}}' } "  >{{sizes.SizeName}}</a>
                </div>

JS

    $scope.showdetailsbyid = function (size) {

        $scope.selectedsize = size;

    }

Answer 1

You need not to add angular expression {{}} in ng-class again. Try following code snippet.

<div style="margin-bottom:5px;margin-top:5px;">
   <a ng-repeat="sizes in mainproductsdata|unique:'SizeName' | filter:selectedcolor"
     data-ng-click="showdetailsbyid(sizes.SizeName);"
     ng-class="{'colorselected': sizes.SizeName == selectedsize , 'colornotselected': sizes.SizeName != selectedsize }">
     {{sizes.SizeName}}
   </a>
</div>