AngularJS Alert is in DOM, should show but doesn't

Question

I have a simple test alert in my page. I can see the markup generated in the page DOM. It looks to me like it should show but it doesn't. Here is my code...

Controller

Html

Chrome console

Looking at the console output, should the alert be visible? It isn't. I'd sure appreciate an expert's advice.

Thanks for looking everyone :-)

EDIT...

Here is my main app.js file

Here is a better Controller clip

EDIT 2...

Here is computed style

Answer 1

Assuming you use UI Bootstrap, you need to create a closeAlert function (which probably throw an undefined error) in your controller like this :

$scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
}

Also don't forget to add the ui.bootstrap dependency in your app

Edit :

Make sure your element is not in display none :)

Answer 2

Here is my working code. I wanted to share. Big thanks to Apercu for getting me over the hump :-) The html goes in your view.html somewhere, maybe at top, and add the AlertService to your app and inject in the controller like normal...

In your controller

$scope.closeAlert = function (index) {
    AlertService.closeAlert(index);
};

Alert html

<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
    <span ng-bind-html="alert.msg"></span>
</alert>

AlertService

angular.module('AJM.AlertService', ['ui.bootstrap'])
.service('AlertService', ['$rootScope', '$sce', '$timeout', function ($rootScope, $sce, $timeout) {

    $rootScope.alerts = []; 

    var self = this;

    var addAlert = function (type, title, msg, seconds) {
        var index = $rootScope.alerts.length;
        $rootScope.alerts.push({ "type":type, "msg":$sce.trustAsHtml('<strong>' + title + '</strong> ' + msg) });
        if (seconds) {
            $timeout(function (index) {
                self.closeAlert(index);
            }, (seconds * 1000));
        }
        return true;
    };

    this.success = function (title, msg, seconds) {
        addAlert('success', title, msg, seconds);
    };

    this.info = function (title, msg, seconds) {
        addAlert('info', title, msg, seconds);
    };

    this.warning = function (title, msg, seconds) {
        addAlert('warning', title, msg, seconds);
    };

    this.danger = function (title, msg, seconds) {
        addAlert('danger', title, msg, seconds);
    };

    this.closeAlert = function (index) {
        $rootScope.alerts.splice(index, 1);
    };

}]);