Q:

How to control the order of applying attribute directives in AngularJS?

I have two "A"-directives. I want to apply them to div element. 
I tried to change order in html file. And I tried to change order in JS file. But the result is the same - first alerts mydirective2, then mydirective1.
How to change the order? I want first mydirective1, second mydirective2.
main.js:
var app = angular.module("angularBlackbox", []);

app.directive("mydirective1", function () {
    return {
        restrict: "A",
        link: function () {
            alert("mydirective1 works!!!");
        }
    }
});

app.directive("mydirective2", function () {
    return {
        restrict: "A",
        link: function () {
            alert("mydirective2 works!!!");
        }
    }
});

index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Blackbox</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div ng-app="angularBlackbox">
    <div mydirective1 mydirective2></div>
</div>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

A:

You could use priorities in the DDO From the documentation

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. Pre-link functions are also run in priority order, but post-link functions are run in reverse order. The order of directives with the same priority is undefined. The default priority is 0
— AngularJS Comprehensive Directive API Reference - priority

var app = angular.module("angularBlackbox", []);

app.directive("mydirective1", function () {
return {
    restrict: "A",
    priority: 200,
    link: function () {
        alert("mydirective1 works!!!");
    }
 }
});

app.directive("mydirective2", function () {
return {
    restrict: "A",
    priority: 100,
    link: function () {
        alert("mydirective2 works!!!");
    }
  }
});

Understanding Priorities in AngularJS Directive Definition Objects and Directive Priority in AngularJS blogs nicely explains priorities in angular directives

