[Solved] – AngularJS – How do I conditionally apply CSS styles ?

Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope.

To reach up the parent scope, use have to use that $index.

<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials">
    {{tutorial.name}}
</li>

span class="circle circle-{{selectcss(document.Extension)}}">

and code

$scope.selectcss = function (data)
{
    if (data == '.pdf')
        return 'circle circle-pdf';
    else
        return 'circle circle-small';
};

css

.circle-pdf
{
    width: 24px;
    height: 24px;
    font-size: 16px;
    font-weight: 700;
    padding-top: 3px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background-image: url(images/pdf_icon32.png);
}

This is the solution that helps for.

<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>