How can i conditionally apply title in angular js

To avoid directly binding to HTML Element properties, you can use the following:

<span [attr.title]="item.status ? 'create' : 'delete'" [ngClass]="'check-' +  item.status"></span>

Just do this

<span title="{{ item.status ? 'create' : 'delete'}}" class="check-{{ item.status }}"></span>

To anyone still trying to figure this out:

Use ng-attr-title="{{ item.status ? 'create' : 'delete'}}". (Introduced in Angular 1.1.4)

Look here for more details.

I had the same problem but I wanted to have my solution more dynamic. This is what I came up with:

directives.directive('myStatus', function() {

var getStatusClass = function (currentStatus) {
    switch (currentStatus) {
        case 'U':
            //a defined css class
            return "unassigned-background";
        ...
        default :
            return "error";
    }
};

var getStatusTitle = function (currentStatus) {
    switch (currentStatus) {
        case 'U':
            //some string you want to use
            return "Unassigned. Inactive";
        ...
        default :
            return "error";
    }
};

return {
    restrict: 'E',
    template: '<span>{{status}}</span>',
    scope: {
        status: '@status' //<-- take note that this is a one-way binding!
    },
    link : function (scope, element, attributes) {
        element.addClass(getTerminalStatusClass(scope.status));
        element.attr("title", getTerminalStatusTitle(scope.status));

    }
}});

Then you can use this like:

<my-status status={{myScopeVariable}}></my-status>