How to bind an alert message with the controller? - angularjs

Question

Hi guys I've been experimenting with a simple commenting app with AngularJS and I'm stuck on how to get an alert message popup in the view if a user inputs an empty string into an input field.
The HTML view and ng-show logic as below:
<div ng-show="alert===true" class="alert alert-warning alert-dismissible inner" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×
</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> You did not submit a comment.
</div>
The controller view and $scope logic as below:
// pushes data back to Firebase Array
$scope.addComment = function(){
if ($scope.newComment.text === ''){
$scope.alert = true;
}
else {
$scope.alert = false;
}
$scope.comments.$add($scope.newComment);
$scope.newComment = {text: '', date: ''};
};
The problem is that although I can bind the alert message logic to the HTML view, the alert message only shows up once and cannot be re-used again if the user types in an empty string again.
Should I use a while loop or something for this? Any help would be much appreciated!
EDIT:
Thanks to meriadec's feedback, I have made a fix using a more simple codebase, as follows.
The HTML view and ng-show logic as below:
<div ng-show="alert===true" class="alert alert-warning inner" role="alert">
<button type="button" class="btn" ng-click="alert=false"><span aria-hidden="true">×
</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> You did not submit a comment.
</div>
The controller view and $scope logic as below:
// pushes data back to Firebase Array
$scope.addComment = function(){
if ($scope.newComment.text === ''){
return $scope.alert = true;
};
$scope.comments.$add($scope.newComment);
$scope.newComment = {text: '', date: ''};
};

Answer 1

You can re-set your alert property to false when clicking the close button. BUT, as you got an ngShow directive, your alert is in a child scope so you need to use an object for having a correct data binding between scopes. More info here.
See this :
angular.module('demo', []);
angular.module('demo')
.controller('DemoCtrl', function ($scope) {
$scope.ui = { alert: false };
$scope.addComment = function () {
if (!$scope.myComment) {
$scope.ui.alert = true;
} else {
alert('well !');
}
}
});
.alert {
position: absolute;
top: 15px;
left: 20%;
right: 20%;
width: 300px;
background: white;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo" ng-controller="DemoCtrl">
<div class="alert" ng-show="ui.alert">
<button ng-click="ui.alert = false">close</button>
You did not enter any comment
</div>
<form ng-submit="addComment()">
<input type="text" ng-model="myComment">
<input type="submit">
</form>
</div>