how to toggle class in angular js on ng-click - angularjs

Question

I am trying to toggle a class on click, please find my below code.
<li class="dropdown" data-ng-class="sign-open">
Sign In <b class="caret"></b>
<div class="dropdown-menu" style="padding: 15px;">
<form action="#" method="post" accept-charset="UTF-8" class="form-menu">
<input id="user_username" type="text" name="user[username]" size="33" placeholder="Username">
<input id="user_password" type="password" name="user[password]" size="33" placeholder="Password">
<label class="checkbox muted hidden-tablet">
<input type="checkbox">Remember Me</label>
<input class="btn span3" type="submit" name="commit" value="Sign In">
</form>
</div>
</li>
//sign in show-hide
$scope.signToogle = function () {
if ($scope.sign-open === "")
$scope.class = "open";
else
$scope.class = "";
}
this js funciton will addclass open so if ul has open class as it's parent then it will be visible.
But don't know how can I make that if click once then true and class append and if again clicked statement false and class will be removed.

Answer 1

You can use ng-class
<div ng-class="{active: is_active}">Some div</div>
<button ng-click="is_active = !is_active" ng-init="is_active=false">Click to toggle</button>
Set or reset $scope.is_active when you click

Answer 2

var app = angular.module('app', []);
app.controller('Main', function($scope) {
$scope.isOpen = false;
});
.item span {
display: none;
}
.item.close span.show-on-close {
display: block;
}
.item.open span.show-on-open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Main">
<pre>isOpen: {{isOpen | json}}</pre>
<span class="item" ng-class="{'open':isOpen, 'close':!isOpen}">
<span class="show-on-open">open</span>
<span class="show-on-close">close</span>
</span>
<button ng-click="isOpen = !isOpen">Toggle</button>
</div>
</div>
NOTE: variable in JavaScript can't contains the dash character
so rename your $scope.sign-open to $scope.signOpen
you don't even have to define a function in the controller, you can do it like this:
<span ng-class="{'open':!signOpen, '':signOpen}"></span>
on click handler
<button ng-click="signOpen = !signOpen">toggle</button>