[解決済み] Angularjs toggle div visibility

質問

ボタンをクリックすると、divのテキストがトグルするようにしたいのですが。スコープ変数を取得し、その変数に基づいてクラス名をトグルしようとしました。どこに間違いがあるのでしょうか？ ここで

<button ng-click="toggle()">test</button>
<div ng-class="{{state}}">
  hello test
</div>

function ctrl($scope) {
  $scope.state = vis;
  $scope.toggle = function() {
    state = !state;
  };
}

.vis {
  display: none;
}

解決方法は？

次のように単純化することができます。

<button ng-click="showDiv = !showDiv">test </button>
<div ng-show="showDiv" >
    hello test
</div>

フィドルの例

特定のng-classをトグルさせる必要がない場合は、次のようにします。

<button ng-click="showDiv = !showDiv">test </button>
<div ng-class="{'vis' : showDiv }" >
    hello test
</div>

フィドルの例

(このために新しいバージョンのangularを使用していることを確認してください)