Angular scope issue

Question

I have tooltip directive that included with:

<div class="wrapper" ng-repeat="item in items">
    <span tooltip="item.description" tooltip-model="item.display" tooltip-border="item.color" tooltip-enable="!!item.description">
        <span>{{$parent.item.label}} - {{$parent.item.display}}</span>
    </span>
</div>

The problem is that I need to use $parent if I want to reference item from the model. Is there a way to make it work wihout $parent?

My directive code look like this (I was using Angular UI bootsrap tooltip as reference but I don't know why it use $eval and $observe if it could bind attributes with = in scope, it use isolated scope becuase it use true for the property)

.directive('tooltip', ['$compile', function($compile) {
    var template = '<div class="description-popup" ng-style="{borderColor: color}" ng-class="{top:!bottom,bottom:bottom}">' +
                      '<p>{{content}}</p>' +
                      '<span class="close icon-cancel-1"></span>' +
                      '<span class="arrow" ng-style="{borderColor: color}"></span>' +
                   '</div>';
    return {
        scope: {
            color: '=tooltipBorder',
            enable: '=tooltipEnable',
            content: '=tooltip',
            model: '=tooltipModel'
        },
        compile: function(element, attrs) {
            var linkerFn = $compile(template);
            return function link(scope, element, attrs) {
                var tooltip = linkerFn(scope, function(){});
                element.after(tooltip);

                ...

            };
        }
    };
}]);

I'm using Angular 1.0.6 so isolated scope work in different way. Scope don't inherit from parent.

Answer 1

Just pass the item object, too:

   scope: {
        color: '=tooltipBorder',
        enable: '=tooltipEnable',
        content: '=tooltip',
        model: '=tooltipModel',
        item: '='
    }

<span item='item'>

Just out of curiosity, why are you using 1.0.6?