Q: Directive render in different order I have two directives 'timeLeft' and 'counter' and they need to be render in order. It works fine if my html element inside ng-repeat. But If I have a single record, I found out the 2nd directive render first instead of First One. Here is my directives definition and html element that uses them
 <span>Time Left:</span> <span data-time-left="{{vm.endDate}}" data-counter=""></span>

1st Directive
app.directive('timeLeft', [function () {

    return {
        link: link,
        restrict: 'A'
    };

    function link(scope, element, attribute) {

        attribute.$observe('timeLeft', function (value) {

            var todayDate = new Date(moment().format());
            var endDate = new Date(value);
            var timeLeft = Math.round(endDate.getTime() / 1000) - Math.round(todayDate.getTime() / 1000);
            attribute.counter = timeLeft;
            element.text(moment.unix(timeLeft).format('h:mm:ss'));
        });
    }
}]);

2nd Directive
app.directive('counter', ['$interval', function ($interval) {

        return {
            link: link,
            restrict: 'A'
        };

        function link(scope, element, attribute) {
            var timeOutId;
            var startTimeStamp;
            attribute.$observe('counter', function (timeStamp) {

                startTimeStamp = timeStamp;
                timeOutId = $interval(function () {

                    startTimeStamp--;
                    element.text(moment.unix(startTimeStamp).format('h:mm:ss'));
                }, 1000);


                element.on('$destroy', function () {

                    $interval.cancel(timeOutId);
                });

            });
        }
    }]);

It should have to render in order to get the desired result. Any suggestion how is it possible? And why it works fine under ng-repeat
Here is a Plunker: http://plnkr.co/edit/HLjH6zcQlDYqeOzujkSz?p=preview

A: Update
The issue is not that the directives are linking in the wrong order, but that the $observe events are firing in an order you weren't expecting. While there is a way to set the order in which directives will compile & link, there is no way to set which attribute related events will fire first.
A solution is to set the priority for both directives, such that they link in the correct order. Then in the link functions, move the blocks you have inside of anonymous sent as callbacks to $observe into standalone functions, which you call from $observe, but first when the link function first runs.
This will ensure that directive's initialize in the "correct" order you expect.
Example (timeleft directive but very similar for counter as well)
.directive('timeLeft', [function () {
  return {
    link: {
      pre: link
    },
    restrict: 'A',
    priority: 1
  };

  function link(scope, element, attributes) {
    var setTimeLeft = function(value) {
      // formerly in $observe anonymous function
    }

    setTimeLeft(attributes.timeLeft);

    attributes.$observe('timeLeft', function(newVal, oldVal){
      if (newVal !== oldVal && oldVal !== undefined) setTimeLeft(newVal);
    });
  }
}]);

Demo
Previous Answer (relevant, but not a complete solution)
Set a priority greater than zero on the directive which you need to run first:
app.directive('timeLeft', [function () {

    return {
        ...
        priority: 1,
        ...
    };

}]);


When there are multiple directives defined on a single DOM element,
  sometimes it is necessary to specify the order in which the directives
  are applied. The priority is used to sort the directives before their
  compile functions get called. Priority is defined as a number.
  Directives with greater numerical priority are compiled first.

priority in the Angular docs
