Compile hidden elements in angular

Question

I have a directive with an ng-repeat that outputs a list. When hover over one of the items, a tooltip will be displayed.

The problem is that the "hover" text isn't compiled, and is displayed as a normal string: "test".

How do I go about compiling it?

Thanks

    $scope. items = [{
                name: "Test1",
                type: 0,
                hover: "<h4>test</h4>"
    }];

   <li ng-repeat="item in items">

       <div ng-if="activeItemIndex === $index">
           <div>{{item.hover}}</div>
       </div>

    </li>

Answer 1

Angular escapes html by default. To render variable value as it is use ng-bind-html directive:

<div ng-if="activeItemIndex === $index">
   <div ng-bind-html="item.hover"></div>
</div>