Angularjs: Verschiedene templates in einer Direktive

[trap]

Hallo

ich benutzte einen Eyetracker und überprüfe wo der User gerade hinschaut. In meiner index.html habe ich mehere panels und genau eine Direktive. Je nachdem auf welchem Panel der User gerade schaut wird eine Methode aufgerufen.

myApp.directive('travelInformation', function ($rootScope, $interval) {
return {
    restrict: 'A',
    scope: {
        updateMethod: '=',
    },
    link: function (scope, element, attrs) {
        var routePanelCounter = 0;
        var timeTablePanelCounter = 0;
        var count = 10;

        this.routePanelUpdate = function (element) {
            routePanelCounter +=1
            if (routePanelCounter == count) {
                //replace the old tag with the new template1

            }
        };

        this.timeTablePanelUpdate = function (element) {
            timeTablePanelCounter += 1;
            if (timeTablePanelCounter == count) {
                //replace the old tag with the new template2
            }

        };


        $interval(function () {
            var boundingRect = element[0].getBoundingClientRect();
            if ($rootScope.gazePoints){
                for (var i = 0; i < $rootScope.gazePoints.length; i++) {
                    var x = $rootScope.gazePoints[i].x;
                    var y = $rootScope.gazePoints[i].y;

                    if (x >= boundingRect.left && x <= boundingRect.right && y >= boundingRect.top && y <= boundingRect.bottom) {
                        console.log("Has Focus");
                        this[scope.updateMethod](element);
                    }
                } 
            }
        }, 3000);
    }
};

die index.html

<div class="panel panel-primary fixed-panel" travel-information data-update-method="'routePanelUpdate'">
<div class="panel-heading">test1</div>
<div class="panel-body">
    old content /// replace the the div-tag with a new template
  </div>
</div>

<div class="panel panel-primary fixed-panel" travel-information data-update-method="'timeTablePanelUpdate'">
<div class="panel-heading">test2</div>
  <div class="panel-body">
    <div>
        Old content 
    </div>
  </div>
</div>

Wenn der entsprechende PanelCounter == 10 ist möchte ich den alten div-tag mit einem neuen tag (template) ersetzen.
Wie ist das möglich? Also "Old-content"-div-tag soll mit template1 ersetzt werden.