javascript - How to use the moment library in angular in a directive that uses compile instead of link -

i have tree of connected documents (parent child) in database single model called actions, they're recursively compiled in angular directive they're nested inside parents.

i have following code:

angular.module('crmdashboardapp')   .directive('actiondirective', function ($http, $compile, recursionhelper) {     return {       scope: {         actionid: '=', // html:action-node, js:actionnode         actionlist: '='       },       templateurl: 'app/main/directive/action/action.directive.html',       replace: true,       restrict: 'e',       compile: function (element) {         return recursionhelper.compile(element, function(scope, ielement, iattrs, controller, transcludefn){           scope.deleteaction = function (_action) {             var id = _action._id;             $http.delete('/api/actions', {                 data: {'id':id},                 headers: {"content-type": "application/json;charset=utf-8"} // need if want send params, otherwise need traditional rest in url               });           };           // find called action list           scope.findaction = function (_id, _list) {             scope.actionnode = _.findwhere(_list, {_id:_id})           };           scope.findaction(scope.actionid, scope.actionlist);            function calculatetimesince(){             scope.fromnow = moment(scope.actionnode.content).fromnow(true);           }           setinterval(calculatetimesince, 1000);           scope.fromnow = moment(scope.actionnode.content).fromnow(true);         });       }     };   }); 

this compiles once on load , changing in scope after nothing. want setinterval function change variable scope.fromnow updated every second , update view (the html references simple {{fromnow}})

i believe i'll have re-compile directive somehow doing like:

$compile(element.contents())(scope) 

within setinterval function doesn't work.

my directive's html looks this:

<div class="action-node">   <header>{{ actionnode.name }}</header>   <div class="row">     <h3 class="col-md-12">{{ actionnode.title }}</h2>     <h5 class="col-md-12">{{ actionnode.description }}</h5>   </div>   <div class="row">     <div class="col-md-3">time since: {{fromnow}}</div>     <div class="col-md-3">content: {{ actionnode.content}}</div>     <div class="col-md-3">duration type:{{ actionnode.duration_type }}</div>     <div class="col-md-3">type: {{ actionnode.type }}</div>   </div>   <div class="row">     <div class="col-md-4">       {{actionnode.children.length > 0 ? actionnode.children : "no children" }}     </div>     <form class="pull-right" ng-submit="deleteaction(actionnode)">       <input class="btn btn-primary" type="submit" value="delete">     </form>   </div>    <div class="action-wrapper" ng-repeat="child in actionnode.children" ng-if="actionnode.children.length > 0">     <!-- <div class="row" ng-repeat="child in actionnode.children"  ng-if="actionnode.children.length > 0" ng-style="{'margin-left': ({{actionnode.nest_level}}+1)*30+'px'}"> -->     <action-directive action-id="child" action-list="actionlist" />   </div> </div> 

you can see calls again right @ bottom. using recursionhelper infinite loop isn't issue.

instead of using setinterval, need use angular wrapper service $interval.

$interval service synchronizes view , model internally calling $scope.$apply executes digest cycle.