Watching attributes in a custom directive - AngularJS - angularjs

Question

Brief background: I'm trying to write a directive that will listen to my bootstrap dropdown menu's aria-expanded attribute, because I want to do something once its value becomes false. From what I understand, this is the "angularJS" way if you want to monitor class changes inside elements.
The aria-expanded class is in this img element. My directive's name is overlay-monitor:
<img ng-init="displayMainMenu()" overlay-monitor id="nav-burger" uib-dropdown-toggle ng-disabled="disabled" ng-click="sMainMenu=true; isSubMenu=resetMenu(); getLinks(); bStopPropagation=true;" src="img/burger.png">
What I really want it to do is to close the opaque overlay I have on the page if aria-expanded becomes false. But for now, I'm just trying to trigger an alert to see if I did it right:
app.directive('overlayMonitor', function () {
return {
restrict: 'A',
scope: { ariaExpanded: '#' },
link: function ($scope, element, attrs) {
if (element.attrs('aria-expanded') == "true") {
alert('directive');
}
}
}
});
When I tested it out, the alert didn't show. :(
What did I do wrong?
Please advise. Thank you!
P.S. I forgot to mention. We are not allowed to use jQuery. Thanks again for your replies!
Edit: After reading about $watch, I tried the following code:
app.directive('overlayMonitor', function () {
return {
restrict: 'A',
scope: { ariaExpanded: '#' },
link: function ($scope, element, attrs) {
$scope.$watch(function () {
if (!attrs.ariaExpanded) {
alert('false');
}
else {
alert('true');
}
});
}
}
});
Good news is that the alert popped up. Bad news is the alert only said "false". It never fired alert('true'). :/

Answer 1

You may use like this:
if (attrs.ariaExpanded) { // instead of element.attrs('..')
alert('directive');
}

Answer 2

The function link is executed once, when the rendering directives.
Therefore, to track changes in a variable you need to use a $watch.
Try following:
app.directive('overlayMonitor', function () {
return {
restrict: 'A',
scope: { ariaExpanded: '#' },
link: function (scope, element, attrs) {
scope.$watch(function(){ return attrs.ariaExpanded; },
function(val){
if (!val) {
alert('directive');
}
});
}
}
});