Classe de alternância do AngularJS usando a classe ng

Estou tentando alternar a classe de um elemento usando ng-class

<button class="btn">
  <i ng-class="{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}"></i>
</button>

isAutoScroll ():

$scope.isAutoScroll = function()
{
    $scope.autoScroll = ($scope.autoScroll) ? false : true;
    return $scope.autoScroll;
}

Basicamente, se $scope.autoScrollfor verdade, quero que a classe ng seja icon-autoscrolle, se for falsa, quero que sejaicon-autoscroll-disabled

O que eu tenho agora não está funcionando e está produzindo esse erro no console

Error: Lexer Error: Unexpected next character at columns 18-18 [?] in expression [{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}].

Como faço isso corretamente?

EDITAR

solução 1: (desatualizada)

<button class="btn" ng-click="autoScroll = !autoScroll">
  <i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>

EDIT 2

solução 2:

Eu queria atualizar a solução Solution 3, pois , fornecida por Stewie, deveria ser a utilizada. É o mais padrão quando se trata de operador ternário (e para mim mais fácil de ler). A solução seria

<button class="btn" ng-click="autoScroll = !autoScroll">
  <i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>

traduz para:

if (autoScroll == true) ?// classe de uso 'icon-autoscroll' :// else use'icon-autoscroll-disabled'

Como usar condicional na classe ng:

Solução 1:

<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>

Solução 2:

<i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i>

Solução 3 (angular v.1.1.4 + introduzido suporte para operador ternário):

<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>

Plunker

Como solução alternativa, com base no operador lógico javascript '&&', que retorna a última avaliação, você também pode fazer o seguinte:

<i ng-class="autoScroll && 'icon-autoscroll' || !autoScroll && 'icon-autoscroll-disabled'"></i>

É apenas uma sintaxe um pouco mais curta, mas para mim é mais fácil de ler.

Adicione mais de uma classe com base na condição:

<div ng-click="AbrirPopUp(s)" 
ng-class="{'class1 class2 class3':!isNew, 
           'class1 class4': isNew}">{{ isNew }}</div>

Aplique: class1 + class2 + class3 quando isNew = false ,

Aplicar: class1 + class4 quando isNew = true

<div data-ng-init="featureClass=false" 
     data-ng-click="featureClass=!featureClass" 
     data-ng-class="{'active': featureClass}">
    Click me to toggle my class!
</div>

De maneira análoga ao toggleClassmétodo jQuery , essa é uma maneira de ativar active/ desativar a classe quando o elemento é clicado.

A rolagem automática será definida e modificada no controlador.

<span ng-class= "autoscroll?'class_if_true':'class_if_false'"></span>

Adicione várias classes com base na condição:

<span ng-class= "autoscroll?'first second third':'classes_if_false'"></span>

Eu fiz este trabalho desta maneira:

<button class="btn" ng-click='toggleClass($event)'>button one</button>
<button class="btn" ng-click='toggleClass($event)' >button two</button>

// no seu controlador

 $scope.toggleClass = function (event){
        $(event.target).toggleClass('active');
    }