How to choose the trigger order - angularjs

Question

I have this directive:
module.directive("myDirective", function() {
return {
restrict: 'E',
templateUrl: 'pathToUrl',
controller: myCtrl,
controllerAs: vm,
bindToController: true,
scope: {
flag: '=',
toggleFlagFunc: '='
}
}
function myCtrl() {
let vm = this;
vm.olMap = new ol.Map({/*map init here*/})
vm.olMap.on("click", clickFunc);
function clickFunc() {
if (vm.flag) {
// Do some logic
vm.toggleFlagFunc();
}
}
}
}
This is the template url:
<div class="first-div"></div>
<div class="second-div"></div>
<div class="map-container-div"></div>
<div class="third-div"></div>
And this instance:
<my-directive flag="vm.flag" toogle-flag-func="vm.toogleFlagFunc" ng-click="vm.myDirectiveClicked()"></my-directive>
And this is the parent ctrl:
function parentCtrl {
let vm = this;
vm.flag = false; // The flag changed to true somewhere
vm.toggleFlagFunc = () => {
vm.flag = !vm.flag;
// Some Other Logic
}
vm.myDirectiveClicked = () => {
if (!vm.flag) {
// Do some logic here
}
}
}
My problem is when vm.flag evaluates to true and I click on the map-container-div, the order of the called functions is vm.toogleFlagFunc and then vm.myDirectiveClicked.
Can I change the order some how?
Thanks in advance!