Clase de alternar AngularJS usando ng-class

Estoy tratando de alternar la clase de un 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;
}

Básicamente, si $scope.autoScrolles cierto, quiero que sea ng-class icon-autoscrolly si es falso, quiero que seaicon-autoscroll-disabled

Lo que tengo ahora no funciona y produce este error en la consola

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

¿Cómo hago esto correctamente?

EDITAR

solución 1: (anticuado)

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

EDITAR 2

solución 2:

Quería actualizar la solución ya que Solution 3, proporcionada por Stewie, debería ser la utilizada. Es el más estándar cuando se trata de operador ternario (y para mí, el más fácil de leer). La solución sería

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

se traduce en:

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

Cómo usar condicional en ng-class:

Solución 1:

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

Solución 2:

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

Solución 3 (angular v.1.1.4 + soporte introducido para operador ternario):

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

Saqueador

Como solución alternativa, basada en el operador lógico javascript '&&' que devuelve la última evaluación, también puede hacerlo así:

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

Es solo una sintaxis un poco más corta, pero para mí es más fácil de leer.

Agregue más de una clase según la condición:

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

Aplicar: class1 + class2 + class3 cuando isNew = false ,

Aplicar: class1 + class4 cuando 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 manera análoga al toggleClassmétodo de jQuery , esta es una forma de activar active/ desactivar la clase cuando se hace clic en el elemento.

el desplazamiento automático se definirá y modificará en el controlador.

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

Agregue varias clases según la condición por:

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

Hice este trabajo de esta manera:

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

// en tu controlador

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