Angular directive not capturing values in local scope - angularjs

Question

I have the following html.
<h2>{{ profile.first_name }} {{ profile.last_name }}</h2>
<p>{{ profile.organisation_name }}</p>
<p>{{ profile.email }}</p>
<p>{{ profile.phone }}</p>
<div class="row marketing">
<transform xml="{{ profile.profiles.profile }}" xslt="LawyerProfile.xslt"/>
</div>
I have an angular service that populates profile object. I have some xml data in {{ profile.profiles.profile }} that I want to transform using a directive.
So I pass in the data and xslt file to apply transform from.
my directive looks like this
'use strict';
clientApp.directive("transform", function () {
return {
restrict: "E",
scope: {
xml: "#",
xslt: "#"
},
replace: true,
transclude: false,
link: function (scope, element) {
console.log(scope);
console.log(scope.xml);
console.log(scope.xslt);
}
};
});
When I inspect the scope object, it have xml data as string in scope.xml but when I console.log it, its not there.
console.log(scope.xslt); works just fine.
Any help will be much appreciated, thanks.
UPDATED:
profileController.js
'use strict';
clientApp
.controller('profileController', function($scope, $routeParams, profileService) {
profileService.getProfile($routeParams.id, $routeParams.publication)
.then(function(profile) {
$scope.profile = profile;
});
});
profileService.js
'use strict';
clientApp.factory('profileService', function($http, $q) {
return {
getProfile: function(id, publication) {
var deferred = $q.defer();
var url = 'http://192.168.7.37:3000/lawyer/' + id + '/' + publication;
$http({ method: 'GET', url: url })
.success(function(data, status, headers, config) {
deferred.resolve(data);
})
.error(function(data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
}
};
});

Answer 1

The problem is that xml is bound to an interpolated value, which is from the $resource service, therefore it's a good idea to use $timeout to let angular's digest cycle finish before you do anything else.
You can try something like this:
.directive("transform", function ($timeout) {
return {
...
link: function (scope, element) {
...
$timeout(function() {
console.log(scope.xml);
}, 0);
}
};
});