Conditional logic in ng-class in directives template

Question

I'm using AngularJS and i'm writing my own directive. I want to use conditional logic in my custom directive. The problem is caused in the template part. Here's a piece of my code:

angular.module('myDirectives').directive('widget', function() {
    return {
        replace: true,
        restrict: 'E',
        template:
            '<div class="widget">' +
                '<div class="panel panel-default">' +
                    '<div class="panel-heading">' +
                            '<a href="" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">' +
                                '<i class="fa" ng-class=" { 'fa-angle-up': !isCollapsed, 'fa-angle-down': isCollapsed } "></i>' +
                            '</a>' +
                    '</div>' +
                    '<div class="panel-body" collapse="isCollapsed">' +
                        '<p>Panel Content</p>' +
                    '</div>' +
                '</div>' +
            '</div>',
        transclude: true
    }
});

This line throws an error.

'<i class="fa" ng-class=" { 'fa-angle-up': !isCollapsed, 'fa-angle-down': isCollapsed } "></i>'

The '' around fa-angle-up and fa-angle-down are causing this. There's probably a very simple workaround, but I haven't figured it out yet. So my question for you guys; Is there any other way to write this line?

Answer 1

You have to escape the apostrophes

'<i class="fa" ng-class=" { \'fa-angle-up\': !isCollapsed, \'fa-angle-down\': isCollapsed } "></i>'