Bootstrap alert not closing onclick of "X" on its window

Experts,

I have an angularJS , Bootstrap application. I have an bootstrap alert window which dont close when I hit the "X" on the right hand top corner. I think the problem came after I updated my version of Bootstrap libraries.

Capture.JPGMy current versions are:
 
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
 <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>

Open in new window



calling place:

<div ng-repeat="alertMessage in alert.alertMessages">
    <uib-alert type="{{alertMessage.type}}" class="alert anim-fade" close="alert.removeAlert(alertMessage)"><span ng-bind-html="alertMessage.message"></span></uib-alert>
</div>

Open in new window



SRF.directive("systemAlert", ['SystemAlertSvc', function (SystemAlertSvc) {
    return {
        templateUrl: 'Scripts/directives/system-alert/system-alert.html',
        restrict: 'E',
        replace: true,
        scope: {
            successDisplaySeconds: '=?',
            errorDisplaySeconds: '=?',
            infoDisplaySeconds: '=?',
            warningDisplaySeconds: '=?',
            instanceId: '=?'
        },
        controllerAs: 'alert',
        controller: ['$scope', '$timeout', function ($scope, $timeout) {
            this.alertMessages = [];
            
            this.newAlert = function (_type, _message) {
                var alertMessage = null;
                var displayMilliseconds = null;

                if (_message === undefined && _type === 'success') {
                    _message = 'Save Successful';
                }
                else if (_message === undefined && _type !== 'success') {
                    throw new Error("Error message missing from non-success alert");
                }

                switch (_type) {
                    case "success":
                        displayMilliseconds = $scope.successDisplaySeconds * 1000;
                        break;
                    case "danger":
                        displayMilliseconds = $scope.errorDisplaySeconds * 1000;
                        break;
                    case "info":
                        displayMilliseconds = $scope.infoDisplaySeconds * 1000;
                        break;
                    case "warning":
                        displayMilliseconds = $scope.warningDisplaySeconds * 1000;
                        break;
                    default:
                        throw new TypeError("Unknown alert message type");
                }

                // check if we have an error message that came back from the server, otherwise, it's a straight up string message
                if (typeof _message === 'object') {
                    if (_message.data && _message.data.Message && _message.data.MessageDetail) { // 404 error generally
                        alertMessage = _message.data.Message + '  ' + _message.data.MessageDetail;
                    }
                    else if (_message.data && _message.data.ExceptionMessage && _message.data.StackTrace) { // standard .Net exception
                        alertMessage = _message.data.Message + "  " + _message.data.ExceptionType + " " + _message.data.ExceptionMessage + " <br/> Stack Trace: " + _message.data.StackTrace;
                    }
                    else if (_message.data && typeof _message.data === 'string') { // .Net HttpResponseException
                        alertMessage = _message.data;
                    }
                }
                else if (typeof _message === 'string') {
                    alertMessage = _message;
                }

                if (alertMessage === null) {
                    throw new TypeError("Unknown object passed as the message parameter in the 'newAlert' function.  The object was: " + JSON.stringify(_message));
                }

                var alert = {
                    message: alertMessage,
                    type: _type
                };

                this.alertMessages.unshift(alert);

                // remove the alert message from the stack
                $timeout(function () { this.removeAlert(alert); }.bind(this), displayMilliseconds);
            }.bind(this);

      [b]      this.removeAlert = function (alert) {
                var index = this.alertMessages.indexOf(alert);
                this.alertMessages.splice(index, 1);
            }.bind(this);[/b]

        }],
        link: function ($scope, iElem, iAttr, ctrl) {
            if (!$scope.successDisplaySeconds) {
                $scope.successDisplaySeconds = 5;
            }

            if (!$scope.errorDisplaySeconds) {
                $scope.errorDisplaySeconds = 40;
            }

            if (!$scope.infoDisplaySeconds) {
                $scope.infoDisplaySeconds = 10;
            }

            if (!$scope.warningDisplaySeconds) {
                $scope.warningDisplaySeconds = 20;
            }

            $scope.instanceId = SystemAlertSvc.registerInstance(ctrl);

            $scope.$on('$destroy', function () {
                SystemAlertSvc.unregisterInstance($scope.instanceId);
            });
        }
    };
}]);

SRF.factory('SystemAlertSvc', [function () {
    var instances = {};
    var lastInstanceId = 0;

    var systemAlertSvc = {
        alertTypes: {
            success: 'success',
            error: 'danger',
            info: 'info',
            warning: 'warning'
        },

        clearAlerts: function (instanceId) {
            if (instanceId) {
                if (instances[instanceId.toString()]) {
                    instances[instanceId.toString()].alertMessages = [];
                }
                else {
                    throw new Error("'instanceId' " + instanceId.toString() + " does not exist.");
                }
            }
            else {
                // clear the alerts in all instances
                for (var prop in instances) {
                    instances[prop].alertMessages = [];
                }
            }
        },

        newAlert: function (type, message, instanceId) {
            if (!instanceId) {
                var maxInstance = 0;
                // locate the most recently added instance
                for(var prop in instances) {
                    var currentInstance = Number(prop);

                    if (currentInstance > maxInstance) {
                        maxInstance = currentInstance;
                    }
                }

                instanceId = maxInstance;
            }

            if (!instances[instanceId.toString()]) {
                throw new Error("'instanceId' " + instanceId.toString() + " does not exist.");
            }

            var systemAlertCtrl = instances[instanceId.toString()];

            systemAlertCtrl.newAlert(type, message);
        },

        registerInstance: function (systemAlertCtrl) {
            var instanceId = lastInstanceId + 1;

            instances[instanceId.toString()] = systemAlertCtrl;

            lastInstanceId = instanceId;

            return instanceId;
        },

        unregisterInstance: function (instanceId) {
            if (!instances[instanceId.toString()]) {
                throw new Error("'instanceId' " + instanceId.toString() + " does not exist.");
            }

            delete instances[instanceId.toString()];
        }
    };

    return systemAlertSvc;
}]);

Open in new window

Subbu GAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Subbu GAuthor Commented:
I tried to use this link to create mine , it works here but not in my code :(
https://angular-ui.github.io/bootstrap/#/alert
Subbu GAuthor Commented:
@JulianH

can you help?
Subbu GAuthor Commented:
My plunker: http://plnkr.co/edit/YkUpFveriXntm342Qk17?p=preview

It works but not in my application. Any  ideas?
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

Julian HansenCommented:
Do you have a link to the page - or can you post full source.
Subbu GAuthor Commented:
Thanks @JulianH

here you go!
Capture5.JPGFull source

<!DOCTYPE html>
<html lang="en" ng-app="StateRevolvingFund">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>State Revolving Fund</title>
    <base id="baseUrl" href="/" />

    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/Content/animate.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Scripts/directives/multi-selector/angular-multi-select.css" rel="stylesheet"/>
<link href="/Content/font-awesome.css" rel="stylesheet"/>
<link href="/Content/som-custom.css" rel="stylesheet"/>
<link href="/Content/som-custom.desktop.css" rel="stylesheet"/>
<link href="/Content/som-custom.tablet.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/Site.desktop.css" rel="stylesheet"/>
<link href="/Content/Site.tablet.css" rel="stylesheet"/>

    
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
</head>
<body id="body" ng-cloak>
    <a class="sr-only" href="#main">Skip to main content</a>
    <a class="sr-only" href="#main-navigation">Skip to main navigation</a>
    <div class="mainWrap">
        <nav class="navbar navbar-inverse som-brandbar" role="navigation" aria-label="Global Navigation">
    <div class="container">
        <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" ng-click="mainMenu.isMainMenuCollapsed = !mainMenu.isMainMenuCollapsed">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div uib-collapse="mainMenu.isMainMenuCollapsed" class="collapse navbar-collapse global">
                    <ul class="nav navbar-nav global-links">
                            <ng-form name="roleSwitch" class="navbar-form navbar-left">
                                <div class="input-group input-group-sm" ng-click="$event.stopPropagation()" ng-controller="RoleSwitchCtrl">
                                    <select name="roleSelect" class="role-switcher form-control" ng-model="roleSwitch.selectedRole" class="form-control"
                                            ng-options="item as item.RoleName for item in roleSwitch.roles">
                                        <option value="">Select A Role</option>
                                    </select>
                                    <span class="input-group-btn">
                                        <button class="btn btn-agency" type="button" ng-click="roleSwitch.switchRole()">Change</button>
                                    </span>
                                </div>
                            </ng-form>
                        <li ng-click="mainMenu.isMainMenuCollapsed = true">
                            <a href="Home">Home</a>
                        </li>
                        <li ng-if="mainMenu.HasPermissions('EditProject')">
                            <a href="Project/">Create Project</a>
                        </li>
                        <ng-form name="findForm" class="navbar-form navbar-left">
                            <div class="input-group input-group-sm" ng-click="$event.stopPropagation()">
                                <input type="text" ui-mask="9999-99" placeholder="####-##" ng-model="mainMenu.projectNumber" class="form-control project-search" id="project_search" enter-key-press="mainMenu.GetProject()" />
                                <span class="input-group-btn">
                                    <button class="btn btn-agency" type="button" ng-click="mainMenu.GetProject()">Find</button>
                                </span>
                            </div>
                        </ng-form>
                        <li ng-if="mainMenu.HasPermissions('GenerateReport')">
                            <a href="Report">Reports</a>
                        </li>
                            <li class="dropdown" uib-dropdown>
                                <a href="#" class="dropdown-toggle" uib-dropdown-toggle data-toggle="dropdown" role="button" aria-expanded="false">Admin <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditAdminDisbursement')"><a href="EditAdminDisbursements">Admin Disbursements</a></li>
                                    <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditDivision')"><a href="EditDivisions">Divisions</a></li>
                                    <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditEmployee')"><a href="EditEmployees">Employees</a></li>
                                    <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditFirm')"><a href="EditFirms">Firms</a></li>
                                    <li ng-if="mainMenu.HasPermissions('EditFundingSource')"><a href="#"><span class="fa fa-caret-left caret-left"></span> Funding Sources</a>
                                        <ul class="dropdown-menu sub-menu">
                                            <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditFundingSource')"><a href="EditFundingSources/{{srfEnums.fundingSourceTypes.CapGrant}}">Cap Grants</a></li>
                                            <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditFundingSource')"><a href="EditFundingSources/{{srfEnums.fundingSourceTypes.Bond}}">Bonds</a></li>
                                        </ul>
                                    </li>
                                    <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditPoliticalContact')"><a href="EditPoliticalContacts">Political Contacts</a></li>
                                    <li ng-click="mainMenu.isMainMenuCollapsed = true" ng-if="mainMenu.HasPermissions('EditTreasuryDraw')"><a href="EditTreasuryDraw">Treasury Draw</a></li>
                                </ul>
                            </li>
                    </ul>
                </div>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="http://www.michigan.gov" class="miGovHome" title="Michigan’s Official Web Site" ng-click="externalLinkClick($event)">
                        MI.gov
                    </a>
                </li>
            </ul>
        </div>

    </div>
</nav>
        <header class="header bottom-border-accent-A" role="banner">
            <div class="container header-background">
                <!--link to home page-->
                <a href="http://www.michigan.gov/deq" class="logo pull-left" ng-click="externalLinkClick($event)"></a>
                <h1 class="siteTitle"><a href="http://www.michigan.gov/deq" ng-click="externalLinkClick($event)">State Revolving Fund</a></h1>
                <span class="tagline"><a href="http://www.michigan.gov/deq" ng-click="externalLinkClick($event)">Michigan Department of Environmental Quality</a></span>
            </div>
        </header>
        <main id="main" role="main" class="main">
            <div class="container">
                    <system-alert instance-id="mainAlertInstance"></system-alert>

                
<div class="view-anim" id="mainView" ng-view>
</div>
            </div>
        </main>
    </div>
    <footer class="footer" role="contentInfo">
        <div class="container">
            <ul class="footer-links">
                <li class="footer-link-trail"><a href="http://www.michigan.gov" class="footer-link" title="Michigan’s Official Web Site" ng-click="externalLinkClick($event)">MI.gov</a></li>
                <li class="footer-link-trail"><a href="Home" class="footer-link">Application Home</a></li>
                <li class="footer-link-trail"><a href="http://www.michigan.gov/deq/0,4561,7-135--281460--,00.html" class="footer-link" ng-click="externalLinkClick($event)">Policies</a></li>
                <li class="footer-link-trail"><a href="#body" class="footer-link visible-xs visible-sm">Back to Top</a></li>
            </ul>
            <p class="hidden-xs">
                Copyright 2001-<span id="current-year">2015</span> State of Michigan
            </p>
        </div>
    </footer>
        <script type="text/javascript">
            window.SRFConfiguration = {
                mapServicesUrl: 'http://gisdev.mcgi.state.mi.us/arcgis/rest/services',
                politicalDistrictsMapUrlSegment: '/BaseMap/CommonQueries/MapServer',
                senateDistrictLayerId: 22,
                houseDistrictLayerId: 21,
                congressionalDistrictLayerId: 23,
                riverBasinsMapUrlSegment: '/BaseMap/CommonQueries/MapServer',
                basinsLayerId: 24,
            };
        </script>
<script src="/Scripts/angularjs/angular.js"></script>
<script src="/Scripts/angularjs/angular-animate.js"></script>
<script src="/Scripts/angularjs/angular-aria.js"></script>
<script src="/Scripts/angularjs/angular-messages.js"></script>
<script src="/Scripts/angularjs/angular-mocks.js"></script>
<script src="/Scripts/angularjs/angular-resource.js"></script>
<script src="/Scripts/angularjs/angular-route.js"></script>
<script src="/Scripts/angularjs/angular-sanitize.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="/Scripts/angular-ui/ui-utils.js"></script>
<script src="/Scripts/uiBootstrapTemplateOverrides.js"></script>
<script src="/Scripts/directives/pagination/dirPagination.js"></script>
<script src="/Scripts/directives/ngmodel-format/ngmodel.format.js"></script>
<script src="/Scripts/directives/multi-selector/angular-multi-select.js"></script>
<script src="/Scripts/directives/angular-esri-map/angular-esri-map.js"></script>
<script src="/Scripts/app.js"></script>
<script src="/Scripts/directives/amountFieldValidator.js"></script>
<script src="/Scripts/directives/dirtyFormHandling.js"></script>
<script src="/Scripts/directives/disableAllFields.js"></script>
<script src="/Scripts/directives/duplicateProjectNumberValidator.js"></script>
<script src="/Scripts/directives/enterKeyPress.js"></script>
<script src="/Scripts/directives/ngMessagesInclude.js"></script>
<script src="/Scripts/directives/paginationPageChange.js"></script>
<script src="/Scripts/directives/projectNumberExistsValidator.js"></script>
<script src="/Scripts/directives/revalidateChildren.js"></script>
<script src="/Scripts/directives/revalidateOnChange.js"></script>
<script src="/Scripts/directives/riverBasinList.js"></script>
<script src="/Scripts/directives/submitOnClick.js"></script>
<script src="/Scripts/directives/textarea.js"></script>
<script src="/Scripts/directives/disbursement/disbursement.js"></script>
<script src="/Scripts/directives/master-detail/srfMasterDetail.js"></script>
<script src="/Scripts/directives/panel/srfPanel.js"></script>
<script src="/Scripts/directives/panel/srfPanelContent.js"></script>
<script src="/Scripts/directives/panel/srfPanelHeading.js"></script>
<script src="/Scripts/directives/switch/srfSwitch.js"></script>
<script src="/Scripts/directives/system-alert/systemAlert.js"></script>
<script src="/Scripts/directives/line-item/srfLineItem.js"></script>
<script src="/Scripts/controllers/AdminDisbursementCtrl.js"></script>
<script src="/Scripts/controllers/ApplicationInformationCtrl.js"></script>
<script src="/Scripts/controllers/ApprovalInformationCtrl.js"></script>
<script src="/Scripts/controllers/AssignmentInformationCtrl.js"></script>
<script src="/Scripts/controllers/CompletionInformationCtrl.js"></script>
<script src="/Scripts/controllers/CreateEditProject.js"></script>
<script src="/Scripts/controllers/DisbursementInformationCtrl.js"></script>
<script src="/Scripts/controllers/DivisionCtrl.js"></script>
<script src="/Scripts/controllers/EmployeeCtrl.js"></script>
<script src="/Scripts/controllers/FinalLineItemCtrl.js"></script>
<script src="/Scripts/controllers/FirmCtrl.js"></script>
<script src="/Scripts/controllers/FundingSourceCtrl.js"></script>
<script src="/Scripts/controllers/HomeCtrl.js"></script>
<script src="/Scripts/controllers/ModalAbbreviationCtrl.js"></script>
<script src="/Scripts/controllers/ModalContactCtrl.js"></script>
<script src="/Scripts/controllers/ModalMapBaseCtrl.js"></script>
<script src="/Scripts/controllers/ModalPermitCtrl.js"></script>
<script src="/Scripts/controllers/ModalRiverBasinCtrl.js"></script>
<script src="/Scripts/controllers/NGAALineItemCtrl.js"></script>
<script src="/Scripts/controllers/PoliticalContactCtrl.js"></script>
<script src="/Scripts/controllers/PoliticalDistrictsMapCtrl.js"></script>
<script src="/Scripts/controllers/ProjectContactCtrl.js"></script>
<script src="/Scripts/controllers/ProjectCtrl.js"></script>
<script src="/Scripts/controllers/ReceivablesCtrl.js"></script>
<script src="/Scripts/controllers/RepaymentInformationCtrl.js"></script>
<script src="/Scripts/controllers/ReportCtrl.js"></script>
<script src="/Scripts/controllers/RiverBasinsMapCtrl.js"></script>
<script src="/Scripts/controllers/TreasuryDrawCtrl.js"></script>
<script src="/Scripts/services/Abbreviation.js"></script>
<script src="/Scripts/services/AdminDisbursement.js"></script>
<script src="/Scripts/services/Authorization.js"></script>
<script src="/Scripts/services/ContactType.js"></script>
<script src="/Scripts/services/County.js"></script>
<script src="/Scripts/services/DirtyPageSvc.js"></script>
<script src="/Scripts/services/Disadvantage.js"></script>
<script src="/Scripts/services/DisadvantageType.js"></script>
<script src="/Scripts/services/DisbursementType.js"></script>
<script src="/Scripts/services/District.js"></script>
<script src="/Scripts/services/Division.js"></script>
<script src="/Scripts/services/Employee.js"></script>
<script src="/Scripts/services/ErrorLogJavaScript.js"></script>
<script src="/Scripts/services/Firm.js"></script>
<script src="/Scripts/services/FirmContact.js"></script>
<script src="/Scripts/services/FundingExplanation.js"></script>
<script src="/Scripts/services/FundingSource.js"></script>
<script src="/Scripts/services/FundingSourceType.js"></script>
<script src="/Scripts/services/LineItem.js"></script>
<script src="/Scripts/services/LocalMatch.js"></script>
<script src="/Scripts/services/Lookups.js"></script>
<script src="/Scripts/services/NewsFeed.js"></script>
<script src="/Scripts/services/Permission.js"></script>
<script src="/Scripts/services/Permit.js"></script>
<script src="/Scripts/services/PoliticalContact.js"></script>
<script src="/Scripts/services/Project.js"></script>
<script src="/Scripts/services/ProjectApplicationInformation.js"></script>
<script src="/Scripts/services/ProjectApprovalInformation.js"></script>
<script src="/Scripts/services/ProjectAssignmentInformation.js"></script>
<script src="/Scripts/services/ProjectBoxNumber.js"></script>
<script src="/Scripts/services/ProjectComment.js"></script>
<script src="/Scripts/services/ProjectCompletionInformation.js"></script>
<script src="/Scripts/services/ProjectContact.js"></script>
<script src="/Scripts/services/ProjectDisbursementInformation.js"></script>
<script src="/Scripts/services/ProjectLineItemInvoice.js"></script>
<script src="/Scripts/services/ProjectReceivables.js"></script>
<script src="/Scripts/services/ProjectRepaymentInformation.js"></script>
<script src="/Scripts/services/ProjectStatus.js"></script>
<script src="/Scripts/services/ProjectType.js"></script>
<script src="/Scripts/services/Report.js"></script>
<script src="/Scripts/services/RiverBasin.js"></script>
<script src="/Scripts/services/Role.js"></script>
<script src="/Scripts/services/SubType.js"></script>
<script src="/Scripts/services/SubTypeManagementPlan.js"></script>
<script src="/Scripts/services/TreasuryDraw.js"></script>
<script src="/Scripts/routes.js"></script>
<script src="/Scripts/customerService.js"></script>
        <script src="http://js.arcgis.com/3.12/"></script>
<script src="/Scripts/controllers/development-only/RoleSwitchCtrl.js"></script>
    <div class="loader" ng-show="showLoadingMessage">
        <div class="loader-content">
            <span>Loading, please wait...</span>
        </div>
    </div>
</body>
</html>

Open in new window

Julian HansenCommented:
Ah yes well with all those dependencies not really much chance of emulating locally. I don't suppose you have a link?
Have you checked your console for errors?
Are you using Chrome + Batarang to check for any issues there?
Subbu GAuthor Commented:
I dont have an emulation place to show you what is going on.  I can see the onclick event dont fire when I click X icon to close it.  Otherwise I have been using chrome dev tools to debug. I will try to utilize Batarang as well. Never heard of that before.
Julian HansenCommented:
When you mouse over the close X does it highlight?
Subbu GAuthor Commented:
Yes it does highlight on mouseover the X icon.

however when I put an alert on the onclick event, it does not call.
Subbu GAuthor Commented:
highlight.JPG
Julian HansenCommented:
however when I put an alert on the onclick event, it does not call.
So you are adding an ng-click to the element and that is not firing?

Two possible scenarios I can think of

1. The link (x) is blocked by something else - which is most likely not the case because the hover works
2. The click is being intercepted somewhere else and not being propagated.

If you take out your directives and use the alert out of the box does it work?
Subbu GAuthor Commented:
2. The click is being intercepted somewhere else and not being propagated.

I feel this is what happening.   I removed the directives and put a generic alert box call onclick. it wouldnt still call..  interesting.
Julian HansenCommented:
You have a bit of a journey ahead of you - you have a gazillion plugins you are loading - could be one or a combination or the order or something completely unrelated.

The trick is to scale it back until it works (which you know it does because your Plunker works as expected). Alternatively, scale your plunker up until it stops working that should help you narrow it down.

I wish I was that good that I could just point to the culprit and say "There's he" but the code is a bit too involved for that so it looks like a bit of plod work
Subbu GAuthor Commented:
Sure @JulianH

I feel the same too. I will work as suggested and see what happens. I feel when I upgraded the angular version, it stopped working anyways will check and let you know the results if I am lucky and could able to find some solution.
BigRatCommented:
My 2 cents worth :

1) In ""alert.removeAlert(alertMessage)" (the action on close) what is "alert"? If the directive has inherited from the scope above removeAlert ought to be directly callable (see also below)

2) What is this [ b ] this.removeAlert(alert) { .....}.bind(this); [ / b ] code on lines 76-79? (extra spaces between the square brackets

3) The element <uib-alert> created by an ng-repeat isn't really a window, but just made to look like one. Since there is a "close" attribute which calls removeAlert() and which (I presume) causes alertMessages to change and thereby re-executing the ng-repeat. I'd first put some logging in the removeAlert routine to check that it gets called and second I'd change the interface from passing an alert object to passing the ng-repeat index. I see you also call this routine on a timer. To solve this problem I'd separate the two until it works.
Subbu GAuthor Commented:
thanks @BigRat for your insight.

I threw some alert messages to see if removeAlert() gets called when I click X in the bootstrap alert, actually it never called or triggers my alert written in lines 76 to 79.

your statement: " To solve this problem I'd separate the two until it works."

Let me know what I can do to fix this issue. I am open to ideas. right now I made it to fade out after 10 seconds but I would like to ability to click X and close the alert as well.
Subbu GAuthor Commented:
<div >
    <uib-alert ng-repeat="alertMessage in alert.alertMessages" type="{{alertMessage.type}}" class="alert anim-fade" close="alert.removeAlert(alertMessage)"><span ng-bind-html="alertMessage.message"></span></uib-alert>
</div>


this one did the magic for me

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BigRatCommented:
And I don't know why? Again:  close="alert.removeAlert(alertMessage)" try changing it to  close="removeAlert(alertMessage)"
Julian HansenCommented:
You are welcome.
Subbu GAuthor Commented:
Thanks guys for your help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.