Include link in angular-ui bootstrap alerts?

Embedding HTML markup in AngularJS expression is usually not the best approach as this way you won't be able to evaluate AngularJS directives.

Anyway, coming back to your question - there are many ways of getting around your problem. If you are just after displaying links the simplest way to go would be to use the ng-bind-html directive (http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml):

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

Working plunk: http://plnkr.co/edit/Ftab0xtcelXcHSZbFRxs?p=preview

The answer above needed required a few more things in order to get working for me.

My alert looks like this:

$scope.alerter.add({    type: "danger",    msg: "<strong>ERROR:</strong> Unable to load credit care plan. Please contact your administrator."});

After doing the above I started getting the following error:

Error: [$sce:unsafe]

So I went ahead, and made me a filter to get around the $sce security. I named the filter unsafe:

.filter('unsafe', function($sce) {    return function(value) {        if (!value) { return ''; }        return $sce.trustAsHtml(value);    };})

Then use the filter like this:

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

My closeAlert function looked like this:

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