javascript - Bootstrap alert doesn't close on clicking close button -

i trying use bootstrap alert show warning. alert fades , dismisses after time give user option of closing himself. have added jquery , js/bootstrap.min.js in order has been suggested in answers similar questions.

this html code:

<div class="alert alert-warning alert-dismissible errormessage" role="alert" style="display: none;">     <button type="button" class="close" data-dismiss="alert"     ng-click="dismisserror()">             <span aria-hidden="true">&times;</span>             <span class="sr-only">close</span>     </button>     {{ errormessage }} </div> 

and js:

//sets errormessage displayed function displayerror(error) {     if(error){             $scope.errormessage = error;             $('.errormessage').fadein(300).delay(5000).fadeout(500);     }  $scope.dismisserror = function() {     $scope.errormessage = '';     $('.errormessage').hide(); }; 

css:

.errormessage{     position: fixed;     top: 1%;     left: 50%;     margin-left: -250px;     width: 500px;     padding-top: 5px;     padding-bottom: 5px;     z-index: 9999;     text-align: center; } 

the implicit close didn't seem working, tried dismisserror function myself on debugging found code flow never enters function.

note: have tried doing

<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times; </button> 

and

<button type="button" class="close" data-dismiss="alert" onclick="$('.alert').hide()" aria-hidden="true">&times; </button> 

both of had no effect. tried making z-index 2 still cannot close alert. help!

ps: using in chromeapp developing

since using angularjs bootstrap, why not use angular ui bootstrap?

you can add ui-bootstrap-min.js file scripts , add controller alert below. html be:

<div class="alert alert-warning alert-dismissible errormessage" role="alert" style="display: none;" ng-controller="alertctrl">            <alert type="{{alert.type}}" close="closealert()">{{ errormessage }}</alert>   </div> 

the javascript be:

angular.module('ui.bootstrap.demo').controller('alertctrl', function ($scope) {       $scope.alert = [           { type: 'danger', errormessage: 'your own error message' },      ];        $scope.closealert = function(index) {         $scope.alerts.splice(index, 1);     };  }); 

this not great javascript function, should able build on solution.