javascript - How to have angular directive for two elements? -

i have small menu on page directive. user scrolls, want navigation become sticky once gets out of viewport.

i have jquery code involves cloning element, , i've used code in past , tried convert on angular in multiple ways. tried leaving 1 element , changing ng-class not have same visual effect , looks bad determined need 2 elements (the original , sticky).

i tried cloning in directive link function, ng-repeat inside not run, menu not populated links.

so tried putting 2 < elements > in dom , renders last one. best way have 2 elements go through same directive? i'm lost.

directive link:

link: function( scope, element ){         var scrolltimer;         var origheight = element.offset().top;          element.clone().insertafter(element).toggleclass('secondary original');          angular.foreach(scope.days, function(value, key) {             var date_data = {action: 'get_date', day: value.name};             $http({                 method: 'post',                 url: ajaxurl,                 headers: {'content-type': 'application/x-www-form-urlencoded'},                 data: date_data             })             .then(function(response){                 scope.days[key].date = response.data.date;             });         });     } 

directive template:

<div id="day_header" class="original">     <div ng-repeat="day in days" ng-class="{'active': active_day == day.name}" class="day" ng-click="changeactiveday(day.name)" data-date="{{day.date}}">{{day.name}}</div> </div> 

i recommend against using clone. have elements set position: relative;. , when scroll moves passed point, change them position: absolute;.