directive doesn't refresh itself on scope change - angularjs

Question

I have a directive to display a gravatar like follows :
angular.module('ngGravatar').directive('gravatar', function(){
return {
restrict: 'E',
template: '<img ng-src={{gravatarUrl}}>',
scope: {email: '='},
controller: function($scope, md5){
var url = 'http://www.gravatar.com/avatar/';
$scope.gravatarUrl = url + md5.createHash($scope.email || '');
}
};
});
I use it in my view like this
<gravatar email="vm.email"></gravatar>
When the view loads, vm.email gets updated asynchronously, and when its value updates, the gravatar directive won't update itself and stays with the default logo...
How can I make it update itself ? With $scope.$watch ? I thought the two way data binding took care of that.
Is there something I missed out on here ?

Answer 1

Try using $scope.$watch to process changes.
angular.module('ngGravatar').directive('gravatar', function()
{
return {
restrict: 'E',
template: '<img ng-src={{gravatarUrl}}>',
scope: { email: '='},
controller: function($scope, md5){
$scope.$watch('email', function(email) {
if (email)
{
var url = 'http://www.gravatar.com/avatar/';
$scope.gravatarUrl = url + md5.createHash(email || '');
}
});
}
};
});

Answer 2

Your directive doesn't refresh after the asynchronous data arrives because it simply doesn't know about its arrival.
It could only possibly know the changes going on in it's controller and not the updates happening in a parent controller.
You can set up a watch on the variable to make your directive update its contents when the appropriate view model changes.
Check the below code snippet which demonstrates that external changes can be tracked by using watchers and internal changes are tracked automatically and the directive updates its contents through data binding features.
angular
.module('demo', [])
.controller('DefaultController', DefaultController)
.directive('gravatar', gravatar);
DefaultController.$inject = ['$timeout'];
function DefaultController($timeout) {
var vm = this;
$timeout(function() {
vm.gravatarName = 'gravatar.png';
}, 500);
}
function gravatar() {
var directive = {
restrict: 'E',
scope: {
name: '='
},
template: '<img ng-src="{{vm.source}}"/>',
controller: GravatarController,
controllerAs: 'vm',
bindToController: true,
};
return directive;
}
GravatarController.$inject = ['$scope', '$timeout'];
function GravatarController($scope, $timeout) {
var vm = this;
var URL = 'https://d13yacurqjgara.cloudfront.net/users/4085/screenshots/2072398/';
// external changes need to be explicitly watched using watchers
$scope.$watch('vm.name', function(newValue, oldValue) {
if (newValue) {
vm.source = URL + vm.name;
}
});
$timeout(function() {
// internal changes are automatically watched
vm.source = 'https://pbs.twimg.com/profile_images/453956388851445761/8BKnRUXg.png';
}, 2000);
}
img {
height: 250px;
width: 250px;
border: 1px solid #E6E6E6;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as vm">
<gravatar name="vm.gravatarName"></gravatar>
</div>
</div>