<span ng-repeat="name in names">
    <ii ng-class="{red: isRed}">Here comes HTML<br/> with {{name}} bla bla </ii>
</span>

EZcountApp.controller('myCtr',function($scope){
    $scope.isRed = true;
    $scope.names= ['Alon','Moshe','Zvi'];
});

<i class="fa fa-question-circle" ng-class="{red: isRed}" title="
Here comes HTML<br/> with {{name}} bla bla
"></i>

<span><i class="fa fa-question-circle red" title="Here comes HTML<br/> with Alon bla bla"></i></span>
<span><i class="fa fa-question-circle red" title="Here comes HTML<br/> with Moshe bla bla"></i></span>
<span><i class="fa fa-question-circle red" title="Here comes HTML<br/> with Zvi bla bla"></i></span>

myApp.directive('ii',function(){
return {
        restrict: 'E',
        transclude: 'element',
        replace: true,
        scope: {},
        controller: function ($scope, $element, $attrs, $transclude) {
            // if there is no class of fa-XXXX
            // some login removed from here...
            $element.addClass('fa-question-circle');


        },
        template: "<i class='fa help-icon' data-toggle='tooltip' data-placement='top' ng-transclude></i>"
    };
});