AngularJS - Priority in Directives

Learn How/When to use priority option in AngularJS Directive

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div style='padding:100px;'>
    <div primary btn>The Hitchhiker’s Guide to the Directive Demo</div>
</div>

JavaScript

var App = angular.module('App', []);

App.directive('btn', function ($timeout) {
    return {
        template: function (elm, attrs) {
            var $newEle = elm.clone();
            $newEle.attr("data-gav", "test");
            $newEle.removeAttr("btn");            
            return $newEle.clone().wrap('<p>').parent().html();
        },
        replace: true,
        restrict: 'A',
        priority: 1,
        link: function (scope, element, attrs) {
            console.log("Test btn");
            console.log(attrs.gav);

            element.addClass('btn');
        }
    };
});

App.directive('primary', function ($http) {
    return {
        restrict: 'A',
        priority: 2,
        link: function (scope, element, attrs) {
            console.log("Test primary");

            if (element.hasClass('btn')) {
                element.addClass('btn-primary');
            }
        }
    };
});