I already have a service for data in real time. This service populate an HTML table with a ng-repeat directive. When my mouse is hover a table row my custom directive should display same data as my table row with more details.
Custome directive angular.module('TEST').directive('helloWorld', function() { return { restrict: 'AEC', replace: 'true', template: '<p ng-click="select()">Hello World!! {{streamData}}</p>', link: function (scope, element, attrs) { scope.streamData = scope.$parent.models[scope.rowIndex].StreamData; scope.$watch(attrs.streamData, function(items) { }); } }; }); Controller $scope.onMouseEnter = function ($event, index) { $scope.rowIndex = index; var coords = getMouseEventResult($event, "Mouse move"); var newElement = $compile('<div id="screenshot"> <hello-world name="row.StreamData" rowIndex="$scope.rowIndex" /></div>')($scope); angular.element(document.body).append(newElement); $("#screenshot") .css("top", (coords.y - xOffset) + "px") .css("left", (coords.x + yOffset) + "px") .fadeIn("fast"); }; I removed the isolate scope Thanks for your help -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To post to this group, send email to angular@googlegroups.com. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.