ng-click dont work on list-group items button - html

Question

I was searching for the solution, but can't resolve it.
I have HomeController and in its constructor I make some functions to work with firebase items. The list group displays todos and buttons, which are connected with data state. The code below shows the todo directive. I'm using scope to exchange the data.
ToDo App
Add Task
<!-- Task List Starts Here -->
<ul class="list-group" ng-show="!isLogged">
<li class="list-group-item clearfix message" ng-repeat="message in messages | filter: {mail : email}" ng-class="{disabled: ! message.done }">
<p class="lead">{{message.text}}</p>
<div>
<span class="pull-right">
<button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pencil"
ng-click="editTask(message)"></span></button>
<button class="btn btn-primary btn-xs" ng-show="! message.done"><span class="glyphicon glyphicon-ok" ng-click="doneTask(message)"></span></button>
<button class="btn btn-primary btn-xs" ng-show="message.done"><span class="glyphicon glyphicon-repeat" ng-click="unDoneTask(message)"></span></button>
<button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove" ng-click="deleteTask(message)"></span></button>
</span>
</div>
</li>
</ul>
<!-- Task List Ends Here -->
</div>
And then I have main.controller file
export default class MainController {
constructor($scope, $firebaseArray, $firebaseAuth) {
var ref = new Firebase("https://learn11.firebaseio.com/todos");
$scope.messages = $firebaseArray(ref);
$scope.addMessage = function() {
$scope.messages.$add({
text: $scope.newMessageText
});
};
$scope.isLogged = false
$scope.loginUser = function() {
ref.authWithPassword({
email: $scope.email,
password: $scope.password
}, function(error, authData) {
if (error) {
$scope.isLogged = false
console.log("Login Failed!", error);
}
else {
$scope.isLogged = true
console.log($scope.isLogged)
}
});
};
$scope.addTask = function() {
var message_ref = new Firebase('https://learn11.firebaseio.com/todos');
var newMessageRef = message_ref.push();
newMessageRef.set({
'done': true,
'text': $scope.task,
'mail': $scope.email
});
};
$scope.editTask = function(message) {
$scope.task = $scope.messages[index].text;
console.log($scope.messages[index].text);
$scope.editIndex = index;
}
$scope.doneTask = function(message) {
$scope.messages[index].done = true;
}
$scope.unDoneTask = function(message) {
$scope.messages[index].done = false;
}
$scope.deleteTask = function(message) {
console.log(message)
$scope.messages.$remove(message)
}
}
}
Can you please help me? What can I do to make it work? And also do you know why isLogged state is not changed in view while it has changed in controller?

Answer 1

Try to use $scope.$apply(function () {$scope.isLogged = true}) for changing isLogged.