How can I $watch a css transition-property in angularjs

Question

I am trying to make a resizable dialog, like this: DEMO.

.directive("dialog", function() {
 return {
 restrict: 'E',
 replace: true,
 scope: {},
 templateUrl: 'dialog-template.html',
 controller: function($scope, $element) {
 $scope.movabled = true;
 $scope.dialogElem = $element;
 },
 link: function(scope, iElem, iAttrs) {
 /* ...... */
 scope.$watch(function() {
 var width = scope.dialogElem.outerWidth(),
 height = scope.dialogElem.outerHeight();
 return [width, height];
 }, function(nValue) {
 console.log(nValue);
 var width = nValue[0], height = nValue[1],
 content = scope.dialogElem.find('.content');
 content.css('height', height-84);
 content.find('.left-panel')
 .css('width', width-110)
 .css('height', height-84);
 content.find('.right-panel')
 .css('height', height-84);
 }, true);
 }
 };
})

But angularjs watch event did not trigger when I expand dialog.

So, how can I $watch transition-property with angularjs?

• Phil Price: Have you checked out $animate? docs.angularjs.org/api/ngAnimate/service/$animate it has callbacks that wait for transitions to complete, you'd need to refactor your directive to apply classes but it would work for what you need.
• Michael Benford: You should avoid using $watch to watch the DOM because Angular will execute your callback at every digest cycle and DOM access is very slow compared to memory access.
• wcp: @PhilPrice thx~ But childrenElement's width and height are depend on parentElement. How can I make it with CSS?
• wcp: @MichaelBenford you mean watch width and height are very slow, and mouse offset is ok?
• Michael Benford: @wcp I didn't say that. I meant you should only watch things that are pretty fast to be accessed (e.g. things stored in memory), and DOM access is arguably slow.